开关组件

app.json

@@ -16,6 +16,7 @@
     ],
     "usingComponents": {
         "My_card": "/components/My_card/index",
+        "My_switch": "/components/My_switch/index",
         "van-button": "@vant/weapp/button/index",
         "van-icon": "@vant/weapp/icon/index",
         "van-image": "@vant/weapp/image/index",

components/My_switch/index.js

@@ -0,0 +1,56 @@
+// components/My_switch/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        list: {
+            type: Array,
+            value: ['最新', '最热']
+        }
+    },
+
+    lifetimes: {
+        ready: function () {
+            this.chengeSelect()
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        checkedItem: 0, //选中项
+        animationData: {}, //横线平移动画
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        changeSwitch(e) {
+            this.setData({
+                checkedItem: this.data.checkedItem == 0 ? 1 : 0
+            })
+            console.log(this.data.list[this.data.checkedItem])
+            this.chengeSelect()
+        },
+        chengeSelect() {
+            let animation = wx.createAnimation({
+                duration: 1000,
+                timingFunction: 'ease',
+            })
+            let that = this;
+            let query = wx.createSelectorQuery().in(this)
+            query.select('.active').boundingClientRect();
+            query.exec(function (res) {
+                animation.translate(res[0].left + 2).step({
+                    duration: 300
+                })
+                that.setData({
+                    animationData: animation.export()
+                })
+            })
+        }
+    }
+})

components/My_switch/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/My_switch/index.scss

@@ -0,0 +1,38 @@
+.switch-box {
+    position: relative;
+    display: flex;
+    width: 170rpx;
+    height: 60rpx;
+    background: #F5F5F5;
+    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;
+    }
+
+    .active {
+        font-size: 24rpx;
+        color: #FFFFFF;
+    }
+
+    .bg {
+        /* width: 85px;
+        height: 52px; */
+        position: absolute;
+        width: calc(50% - 4px);
+        height: calc(100% - 8rpx);
+        background: #FA8C16;
+        border-radius: 30rpx;
+        top: 4rpx;
+        z-index: 1;
+    }
+}

components/My_switch/index.wxml

@@ -0,0 +1,4 @@
+<view class="switch-box">
+    <view class="bg" animation="{{animationData}}" />
+    <view class="{{checkedItem==index?'active':''}}" wx:for="{{list}}" wx:key="{{item}}" wx:if="{{index<2}}" bindtap="changeSwitch">{{item}}</view>
+</view>

pages/tabbar/home/index.wxml

@@ -17,7 +17,6 @@
     </My_card>
 </view>
 <view style="height: 130rpx;" />
-
 <!-- 滚动通知 -->
 <view class="scroll-area">
     <van-notice-bar custom-class='notice-bar' background="none" color='#666' text="滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域">