开关

components/My_switch/index.js

@@ -9,10 +9,17 @@ Component({
             value: ['最新', '最热']
         }
     },
-
     lifetimes: {
         ready: function () {
-            this.chengeSelect()
+            const that = this;
+            let query = wx.createSelectorQuery().in(this)
+            query.select('.switch-box').boundingClientRect();
+            query.exec(function (res) {
+                that.setData({
+                    baseLeft: res[0].left
+                })
+                that.chengeSelect()
+            })
         }
     },
 
@@ -22,6 +29,7 @@ Component({
     data: {
         checkedItem: 0, //选中项
         animationData: {}, //横线平移动画
+        baseLeft: 0,
     },
 
     /**
@@ -44,7 +52,7 @@ Component({
             let query = wx.createSelectorQuery().in(this)
             query.select('.active').boundingClientRect();
             query.exec(function (res) {
-                animation.translate(res[0].left + 2).step({
+                animation.translate(res[0].left - that.data.baseLeft + 2).step({
                     duration: 300
                 })
                 that.setData({

components/My_switch/index.scss

@@ -7,13 +7,11 @@
     border-radius: 30rpx;
 
     view {
-        position: relative;
         flex: 1;
         height: 60rpx;
         text-align: center;
         line-height: 60rpx;
         z-index: 2;
-
         font-size: 24rpx;
         font-family: PingFang SC-Regular, PingFang SC;
         color: #999999;
@@ -25,7 +23,7 @@
     }
 
     .bg {
-        /* width: 85px;
+        /* width: ;
         height: 52px; */
         position: absolute;
         width: calc(50% - 4px);