微信小程序系列十四：tab点击切换效果

最新推荐文章于 2024-01-05 16:34:27 发布

小丫么小菜菜

最新推荐文章于 2024-01-05 16:34:27 发布

阅读量589

点赞数

分类专栏：小程序系列文章标签： tab切换

本文链接：https://blog.csdn.net/stp_zsj/article/details/82387398

版权

小程序系列专栏收录该内容

16 篇文章 0 订阅

订阅专栏

原理：

根据current渲染class样式;

wxml:

 <view class='tabbar'>
    <view class="{{current==1?'tab-item item-on':'tab-item'}}" bindtap='select' data-index='1'>tab1</view>
    <view class="{{current==2?'tab-item item-on':'tab-item'}}" bindtap='select' data-index='2'>tab2</view>
  </view>

js:


const app = getApp()
const url=app.data.url
Page({
  data: {
   current:1,
  },
  //事件处理函数
  select:function(e){
    this.setData({
      current: e.currentTarget.dataset.index
    })
  }, 
  onLoad: function () {
    
  }
})