diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..d369c1a
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,5 @@
+## v1.1.2
+
+### optimized
+
+- optimized: totp 页面使用 weui-slideview 左滑功能提升性能(#11)
diff --git a/miniprogram/interface/totp.ts b/miniprogram/interface/totp.ts
index b91687f..3f306a2 100644
--- a/miniprogram/interface/totp.ts
+++ b/miniprogram/interface/totp.ts
@@ -1,7 +1,3 @@
-interface ITotpItem extends ITotpItemResponse {
- isTouchMove: boolean,
-}
-
interface ITotpItemResponse {
id: number,
issuer: string,
diff --git a/miniprogram/pages/totp/index.json b/miniprogram/pages/totp/index.json
index 56a534e..0c9b90f 100644
--- a/miniprogram/pages/totp/index.json
+++ b/miniprogram/pages/totp/index.json
@@ -2,7 +2,7 @@
"usingComponents": {
"mp-icon": "weui-miniprogram/icon/icon",
"mp-toptips": "weui-miniprogram/toptips/toptips",
- "mp-dialog": "weui-miniprogram/dialog/dialog"
+ "mp-slideview": "weui-miniprogram/slideview/slideview"
},
"navigationBarTitleText": "TOTP身份验证器"
}
\ No newline at end of file
diff --git a/miniprogram/pages/totp/index.scss b/miniprogram/pages/totp/index.scss
index a102380..f03788b 100644
--- a/miniprogram/pages/totp/index.scss
+++ b/miniprogram/pages/totp/index.scss
@@ -21,6 +21,10 @@
.item {
height: 80px;
+ display: flex;
+ flex-flow: row nowrap;
+ overflow: hidden;
+ justify-content: space-between;
padding: 10px;
border-bottom: 1px #f6f6f6 solid;
@@ -28,99 +32,42 @@
border-bottom: none;
}
- .item-movable-area {
- width: 100%;
- height: 100%;
-
- .item-movable-view {
- width: 100%;
- height: 100%;
+ .item-body {
+ display: flex;
+ flex-flow: row wrap;
+ align-items: center;
+ justify-content: center;
+
+ .item-body-info {
+ flex: 2;
display: flex;
- flex-flow: row nowrap;
+ flex-flow: column nowrap;
overflow: hidden;
- justify-content: space-between;
-
- .item-body {
- display: flex;
- flex-flow: row wrap;
- align-items: center;
- justify-content: center;
- width: 100%;
- transition: all 0.4s;
- transform: translateX(120px);
- margin-left: -120px;
- margin-right: 0;
-
- .item-body-info {
- flex: 2;
- display: flex;
- flex-flow: column nowrap;
- overflow: hidden;
- height: 100%;
-
- .item-body-info-issuer {
- flex: 2;
- overflow: hidden;
- text-overflow: ellipsis;
- font-size: 30px;
- text-align: center;
- color: #636363;
- }
-
- .item-body-info-username {
- color: gray;
- flex: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- font-size: 12px;
- text-align: center;
- }
- }
+ height: 100%;
- .item-body-code {
- flex: 3;
- font-size: 50px;
- text-align: center;
- }
+ .item-body-info-issuer {
+ flex: 2;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 30px;
+ text-align: center;
+ color: #636363;
}
- .item-operation {
- width: 120px;
- font-size: 20px;
- color: #fff;
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
- justify-content: center;
- transform: translateX(140px);
- transition: all 0.4s;
-
- .item-update {
- width: 100%;
- height: 100%;
- background-color: #E6A23C;
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
- justify-content: center;
- }
-
- .item-delete {
- width: 100%;
- height: 100%;
- background-color: #F56C6C;
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
- justify-content: center;
- }
+ .item-body-info-username {
+ color: gray;
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 12px;
+ text-align: center;
}
+ }
- &.item-movable-active {
- .item-body,.item-operation {
- transform: translateX(0) !important;
- }
- }
+ .item-body-code {
+ flex: 3;
+ font-size: 50px;
+ text-align: center;
}
}
}
diff --git a/miniprogram/pages/totp/index.ts b/miniprogram/pages/totp/index.ts
index b584320..0ab21f3 100644
--- a/miniprogram/pages/totp/index.ts
+++ b/miniprogram/pages/totp/index.ts
@@ -5,12 +5,11 @@ import { WeixinError } from '@models/error'
Page({
data: {
toptipError: '',
+ slideViewButtons: [{"text": "备注"}, {"type": "warn", "text": "删除"}],
remainSeconds: 30,
- items: [] as ITotpItem[],
+ items: [] as ITotpItemResponse[],
intervalIdentity: 0,
isScanQrCode: false,
- startX: 0,
- startY: 0
},
async onShow() {
this.timing()
@@ -56,15 +55,7 @@ Page({
await wx.showLoading({title: '加载中'})
api.all().then((response) => {
- const items: ITotpItem[] = []
- response.forEach((v: ITotpItemResponse) => {
- items.push({
- isTouchMove: false,
- ...v
- })
- })
-
- this.setData({items})
+ this.setData({items: response})
}).catch((e) => {
this.setData({toptipError: e.message})
}).finally(async () => {
@@ -83,19 +74,33 @@ Page({
await this.all()
})
},
- async edit(e: any) {
+ async slideviewButtontap(e: any) {
+ const id = Number(e.currentTarget.id)
+
+ switch(e.detail.index) {
+ case 0:
+ // 备注
+ await this.edit(id)
+ break;
+ case 1:
+ // 删除
+ await this.delete(id)
+ break;
+ }
+ },
+ async edit(id: number) {
this.clearInterval()
- await wx.navigateTo({url: '/pages/totp/edit?id=' + e.currentTarget.dataset.id})
+ await wx.navigateTo({url: '/pages/totp/edit?id=' + id})
},
- async delete(e: any) {
+ async delete(id: number) {
const result = await wx.showModal({title: '是否确定删除？', content: '删除后数据不可恢复'})
if (result.cancel) {
return;
}
- api.deleteTotp(e.currentTarget.dataset.id).catch((e) => {
+ api.deleteTotp(id).catch((e) => {
this.setData({toptipError: e.message})
}).finally(async () => {
await this.all()
@@ -106,52 +111,6 @@ Page({
this.data.intervalIdentity = 0
},
- touchstart(e: any) {
- // 开始触摸时 重置所有删除
- this.data.items.forEach(function (v: ITotpItem) {
- if (v.isTouchMove) {
- v.isTouchMove = false;
- }
- })
-
- // 手指触摸动作开始 记录起点X坐标
- this.setData({
- startX: e.changedTouches[0].clientX,
- startY: e.changedTouches[0].clientY,
-
- items: this.data.items
- })
- },
- touchmove(e: any) {
- const index = e.currentTarget.dataset.index;
- const startX = this.data.startX;
- const startY = this.data.startY;
- const touchMoveX = e.changedTouches[0].clientX;
- const touchMoveY = e.changedTouches[0].clientY;
-
- // 获取滑动角度
- const angle = this.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
-
- this.data.items.forEach(function (v: ITotpItem, i: number) {
- v.isTouchMove = false
-
- if (Math.abs(angle) > 30 || i != index) {
- return;
- }
-
- v.isTouchMove = touchMoveX <= startX;
- })
-
- this.setData({
- items: this.data.items
- })
- },
- angle(start: any, end: any) {
- const _X = end.X - start.X
- const _Y = end.Y - start.Y
-
- return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
- },
})
export default {}
\ No newline at end of file
diff --git a/miniprogram/pages/totp/index.wxml b/miniprogram/pages/totp/index.wxml
index 4d3c00b..7b6c1e4 100644
--- a/miniprogram/pages/totp/index.wxml
+++ b/miniprogram/pages/totp/index.wxml
@@ -1,26 +1,19 @@
+
暂无数据
+
-
-
-
-
-
- {{item.issuer}}
- {{item.username}}
-
- {{item.code}}
+
+
+
+ {{item.issuer}}
+ {{item.username}}
-
- 备注
- 删除
-
-
-
-
-
+ {{item.code}}
+
+