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

效果展示

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 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>  

wxss

page{  height: 100%;}/* 切换栏 */.list-top {  height: 106rpx;  box-sizing: border-box;  padding: 5px 10px;}.list-top ul {  display: flex;  height: 72rpx;  border-radius: 12rpx;}.list-top li {  flex: 1;  display: flex;  font-size: 14px;  justify-content: center;  align-items: center;  color: #FFA500;}.list-top .active {  border-radius: 50px;  border-bottom: 2px #FFA500 solid;  background: #FFA500;  color: #ffffff;}.scroll-view {  width: 100%;  white-space: nowrap;  /* 规定段落中的文本不进行换行 */}.scroll-1 {  height: 100%;}.swiper-1 {  height: 80%;}

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)  },})

福利

?

「写留言｜查看留言」

仙女都在看点点点，赞和在看都在这儿！