微信小程序--动态切换栏

效果展示

Demo代码

wxml

<!-- 切换栏 -->
<view class='list-top'>
<ul>
<li class="{{flag==0?'active':''}}" catchtap="changeflag" data-index="0">打卡记录</li>
<li class="{{flag==1?'active':''}}" catchtap="changeflag" data-index="1">月排行榜</li>
<li class="{{flag==2?'active':''}}" catchtap="changeflag" data-index="2">总排行榜</li>
</ul>
</view>

<!-- 对于swiper -->
<swiper class='swiper-1' current="{{flag}}" indicator-dots="{{swiper.indicatorDots}}" autoplay="{{swiper.autoplay}}" interval="{{swiper.interval}}" duration="{{swiper.duration}}" bindchange="changeSlider">
<block>
<!-- 第一个栏目 -->
<swiper-item>
<image src="https://wx1.sinaimg.cn/large/691bee7aly1gbr3vrg2ceg20m80gok5e.gif"></image>
</swiper-item>
<!-- 第二个栏目 -->
<swiper-item>
<image src="https://wx1.sinaimg.cn/large/691bee7aly1gbr3vsnljog20m80gogul.gif"></image>
</swiper-item>
<!-- 第三个栏目 -->
<swiper-item>
<image src="https://wx1.sinaimg.cn/large/691bee7aly1gbr3vp6f91g20m80gok11.gif"></image>
</swiper-item>
</block>
</swiper>

js

//index.js
//获取应用实例
const app = getApp()

Page({
data: {
flag: 0, //状态栏切换
swiper: {
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
}, //swiper设置
},
onLoad: function () {

},
changeflag: function (e) {
var k = this
k.setData({
flag: e.target.dataset.index
})
console.log(e.target.dataset.index)
},
changeSlider: function (e) {
var k = this
this.setData({
flag: e.detail.current
})
console.log(e.detail.current)
},
})

wxss

完整源码获取途径
见文末引言```