微信小程序实现选项卡切换功能

最新推荐文章于 2024-07-09 22:25:47 发布

xcjlk

最新推荐文章于 2024-07-09 22:25:47 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/xcjlk/article/details/104954442

版权

<view class='topTabSwiper'>
    <view class='tab  {{currentData == 0 ? "tabBorer" : ""}}'  data-current = "0" bindtap='checkCurrent'>推荐</view>
    <view class='tab  {{currentData == 1 ? "tabBorer" : ""}}'  data-current = "1" bindtap='checkCurrent'>热点</view>
    <view class='tab  {{currentData == 2 ? "tabBorer" : ""}}'  data-current = "2" bindtap='checkCurrent'>关注</view>
</view>
<swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
  <swiper-item><view class='swiper_con'>welcome come to 推荐</view></swiper-item> 
  <swiper-item><view class='swiper_con'>welcome come to 热点</view></swiper-item>
  <swiper-item><view class='swiper_con'>welcome come to 关注</view></swiper-item>  
</swiper>

.tab{
float: left; 
width: 33.3333%;
text-align: center;
padding: 10rpx 0;
 }
.topTabSwiper{
border-top: 1px solid #ccc; 
border-bottom: 1px solid #ccc; 
zoom: 1;
}
.topTabSwiper:after{
content: "";
 clear: both;
 display: block;
 }
.tabBorer{
border-bottom: 1px solid #f00;
 color: #f00;
 }
.swiper{
width: 100%;
}
.swiper_con{
text-align: center;
 width: 100%; 
 height: 100%;
  padding: 80rpx 0;
  }

Page({

  /**
   * 页面的初始数据
   */
  data: {
      currentData : 0,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  //获取当前滑块的index
  bindchange:function(e){
    const that  = this;
    that.setData({
      currentData: e.detail.current
    })
  },
  //点击切换，滑块index赋值
  checkCurrent:function(e){
    const that = this;

    if (that.data.currentData === e.target.dataset.current){
        return false;
    }else{

      that.setData({
        currentData: e.target.dataset.current
      })
    }
  }
})