optimized: totp 页面使用 weui-slideview 左滑功能提升性能 (#11)

yansongda · Nov 7, 2023 · 9c5d420 · 9c5d420
1 parent 5b0576e
commit 9c5d420
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 170 deletions.
diff --git a/CHANGELOG.md 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
@@ -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
@@ -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身份验证器"
 }
diff --git a/miniprogram/pages/totp/index.scss b/miniprogram/pages/totp/index.scss
@@ -21,106 +21,53 @@
 
   .item {
     height: 80px;
+    display: flex;
+    flex-flow: row nowrap;
+    overflow: hidden;
+    justify-content: space-between;
     padding: 10px;
     border-bottom: 1px #f6f6f6 solid;
 
     &:last-child {
       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
@@ -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 {}
diff --git a/miniprogram/pages/totp/index.wxml b/miniprogram/pages/totp/index.wxml
@@ -1,26 +1,19 @@
 <mp-toptips msg="{{toptipError}}" type="error" show="{{toptipError}}"></mp-toptips>
 
 <progress percent="{{ remainSeconds / 30 * 100 }}" stroke-width="2" class="progress"></progress>
+
 <view class="{{ items.length > 0 ? 'has-data' : 'no-data' }}">暂无数据</view>
+
 <view class="items">
-  <view class="item" wx:for="{{items}}" wx:for-index="index" wx:key="id">
-    <movable-area class="item-movable-area">
-      <movable-view class="item-movable-view {{item.isTouchMove ? 'item-movable-active' : ''}}" data-index="{{index}}" out-of-bounds="true" direction="horizontal" inertia="true" bindtouchstart="touchstart" bindtouchmove="touchmove">
-        <view class="item-body">
-          <view class="item-body-info">
-            <view class="item-body-info-issuer">{{item.issuer}}</view>
-            <view class="item-body-info-username">{{item.username}}</view>
-          </view>
-          <view class="item-body-code">{{item.code}}</view>
+  <mp-slideview class="item" wx:for="{{items}}" wx:for-index="index" wx:key="id" buttons="{{slideViewButtons}}" bindbuttontap="slideviewButtontap" id="{{ item.id }}">
+    <view class="item-body">
+        <view class="item-body-info">
+          <view class="item-body-info-issuer">{{item.issuer}}</view>
+          <view class="item-body-info-username">{{item.username}}</view>
         </view>
-        <view class="item-operation">
-          <view class="item-update" data-id="{{ item.id }}" bind:tap="edit">备注</view>
-          <view class="item-delete" data-id="{{ item.id }}" bind:tap="delete">删除</view>
-        </view>
-
-      </movable-view>
-    </movable-area>
-  </view>
+        <view class="item-body-code">{{item.code}}</view>
+      </view>
+  </mp-slideview>
 </view>
 
 <view class="footer">