优化逻辑

components/Yl_FunTabs/index.js

@@ -29,7 +29,6 @@ Component({
         }
     },
     data: {
-        scrollLeft: 0,
         startPoint: 0, //记录滑动的初始位置
         slipFlag: false, //定义 滑动事件 节流阀, 防止一次滑动触发多次滑动事件
     },
@@ -45,22 +44,7 @@ Component({
             this.setActive();
         },
         setActive() {
-            const that = this,
-                active = this.data.active,
-                query = wx.createSelectorQuery().in(this);
-
-            query.select('#active' + active).boundingClientRect((res) => {
-                if (!res) return; // 防止未找到元素时报错
-                const tabWidth = res.width; // 获取 tab 的宽度
-                const screenWidth = wx.getSystemInfoSync().windowWidth; // 获取屏幕宽度（px）
-                const scrollLeft = Math.max(0, res.left + that.data.scrollLeft - (screenWidth / 2) + (tabWidth / 2)); // 居中计算并确保不小于 0
-
-                that.setData({
-                    scrollLeft
-                });
-            }).exec();
-
-            this.triggerEvent("onChenge", active);
+            this.triggerEvent("onChenge", this.data.active);
         },
         myTouchStart(e) {
             return;

components/Yl_FunTabs/index.wxml

@@ -1,5 +1,5 @@
-<scroll-view wx:if="{{mode=='default'}}" scroll-x enable-flex class="scroll" scroll-left='{{scrollLeft}}' scroll-with-animation enable-passive>
-    <view class="item {{active==index?'active':''}}" id="{{active==index?'active'+index:''}}" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="tabsChenge">
+<scroll-view wx:if="{{mode=='default'}}" scroll-x enable-flex class="scroll" scroll-into-view='{{"active"+active}}' scroll-into-view-offset='-20' scroll-with-animation enable-passive>
+    <view class="item {{active==index?'active':''}}" id="{{'active'+index}}" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="tabsChenge">
         <view class="icon" wx:if="{{item.icon}}">
             <text class="iconfont {{item.icon}}" />
         </view>
@@ -7,9 +7,9 @@
         <view class="label line-1">{{language[item.label]||item.label}}</view>
     </view>
 </scroll-view>
-<scroll-view wx:elif="{{mode=='buts'}}" class='buts-scroll' scroll-x enable-flex scroll-left='{{scrollLeft}}' scroll-with-animation enable-passive>
-    <view class="buts-box" id="{{active==index?'active'+index:''}}" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="tabsChenge">
-        <view class="but-item {{active==index?'active':''}}"  hover-class="navigator-hover">
+<scroll-view wx:elif="{{mode=='buts'}}" class='buts-scroll' scroll-x scroll-into-view='{{"active"+active}}' scroll-into-view-offset='-20' enable-flex scroll-with-animation enable-passive>
+    <view class="buts-box" id="{{'active'+index}}" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="tabsChenge">
+        <view class="but-item {{active==index?'active':''}}" hover-class="navigator-hover">
             <view class="label line-1">{{language[item.label]||item.label}}</view>
         </view>
     </view>