导入抄表记录

pages/writeReading/components/meterList/index.js

@@ -13,16 +13,19 @@ Component({
    */
   data: {
     animationData: {}, // 存储动画数据
-    position: 0
+    position: 0,
+    scrollLeft: 0, // 当前滚动位置
+    maxScrollLeft: 0 // 最大可滚动距离
   },
   lifetimes: {
     attached() {
-      // 在页面准备就绪时初始化动画实例
-    this.animation = wx.createAnimation({
-      duration: 500, // 动画持续时间，单位 ms
-      timingFunction: 'ease-out', // 动画缓动函数，还可以是 'linear', 'ease-in', 'ease-in-out'
-      delay: 0 // 动画延迟时间
-    });
+      const query = this.createSelectorQuery();
+      // query.select('.scroll-content').boundingClientRect();
+      console.log("query", query)
+      query.select('.meterListScrollView').boundingClientRect((rect) => {
+        console.log("rect", rect)
+      });
+      
     }
   },
   /**
@@ -60,6 +63,28 @@ Component({
     },
     onChangeMeter() {
       console.log("---------------")
+    },
+    onScroll(e) {
+      // 实时更新当前滚动位置，可用于更复杂的边界判断
+      this.setData({
+        scrollLeft: e.detail.scrollLeft
+      });
+    },
+  
+    scrollLeft() {
+      // 向左滚动：减少 scrollLeft，但不能小于0
+      const newScrollLeft = Math.max(0, this.data.scrollLeft - 200);
+      this.setData({
+        scrollLeft: newScrollLeft
+      });
+    },
+  
+    scrollRight() {
+      // 向右滚动：增加 scrollLeft，但不能超过 maxScrollLeft
+      const newScrollLeft = Math.min(this.data.maxScrollLeft, this.data.scrollLeft + 200);
+      this.setData({
+        scrollLeft: newScrollLeft
+      });
     }
   }
 })

pages/writeReading/components/meterList/index.wxml

@@ -5,12 +5,15 @@
         <text> 电表列表 </text>
     </view>
     <view style="display: flex; align-items: center;margin-top: 20rpx;">
-        <van-icon name="arrow-left" size="50rpx" bind:tap="handleLeft" />
+        <van-icon name="arrow-left" size="50rpx" bind:tap="scrollLeft" />
         <scroll-view
             scroll-x="{{true}}"
             class="meterListScrollView"
+            scroll-left="{{scrollLeft}}" 
+            bindscroll="onScroll" 
+            scroll-with-animation="true"
         >
-            <view style="margin-left: {{position}}rpx; display: flex;">
+            <view style="display: flex;" class="scroll-content">
                 <meter-item active="{{true}}"  />
                 <meter-item active="{{false}}" bind:click="onChangeMeter" />
                 <meter-item active="{{false}}" />
@@ -23,7 +26,7 @@
                 <meter-item active="{{false}}" />
             </view>
         </scroll-view>
-        <van-icon name="arrow" size="50rpx" bind:tap="handleRight" />
+        <van-icon name="arrow" size="50rpx" bind:tap="scrollRight" />
     </view>
     
 </view>