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

效果展示

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