欢迎光临,了解各类小程序、网站开发,就上众彬建站! 退出 注册 登录

微信小程序-实现tab

发布:2022-03-15 17:07浏览: 来源: 作者:

小程序开发中,有很多封装好的控件供开发者使用,但是,很常见的tab选项卡居然没有,只能自己搞一个。

实现原理也很简单,无非是用给view(tab)设置一个点击事件bintap,并且给view(tab)一个data-idx索引,根据当前index来改变tab的状态并决定swiper显示那个内容,改变swiper的内容只需要改变swiper的current就好。

二、效果

三、实现

wxml


    
      
      
        
          未使用
          
已使用
已过期
名称:{{item.name}} 面额:{{item.money}} 名称:{{item.name}} 面额:{{item.money}} 名称:{{item.name}} 面额:{{item.money}}

js文件

// pages/mine/mine.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex: 0,
    "firstList": [{ name: 'w券1', money: '5.00' }, { name: 'w券2', money: '50.00'}],
    "secondList": [{ name: 'y券1', money: '10.00' }, { name: 'y券2', money: '20.00' }],
    "thirdList": [{ name: 'g券1', money: '30.00' }, { name: 'g券2', money: '40.00' }],
  },

  //swiper切换时会调用
  pagechange: function (e) {
    if ("touch" === e.detail.source) {
      let currentPageIndex = this.data.currentIndex
      currentPageIndex = (currentPageIndex + 1) % 3
      this.setData({
        currentIndex: currentPageIndex
      })
    }
  },
  //用户点击tab时调用
  titleClick: function (e) {
    let currentPageIndex =
      this.setData({
        //拿到当前索引并动态改变
        currentIndex: e.currentTarget.dataset.idx
      })
  }

})

wxss文件

.container {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.title {
  width: 100%;
  height: 88rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.title-sel {
  color: #24272c;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-sel  .line-style{
  background: #fff;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}

.title-sel-selected{
  color: #006bff;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title-sel-selected .line-style{
  background: #006bff;
  height: 6rpx;
  width: 90rpx;
  position: relative;
  margin-top: 10rpx;
}

.swiper {
  width: 90%;
  flex: 1;
  overflow: scroll;
  margin: 0 auto;
}

.record-item {
  margin-top: 10rpx;
  background-color: white;
  padding-bottom: 5rpx;
  padding-top: 5rpx;
  font-size: 30rpx;
}

.name{
  display: flex;
  justify-content: space-between;
  border: 1px solid #eee;
  padding: 2vh;
  border-radius: 10rpx
}

四、参考官方文档

那么当内容改变时,我们也要改变tab选项卡的状态,这时候我们给swiper来一个bindchange,同样是官方文档









免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。