微信小程序选项卡页面切换-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序选项卡页面切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序选项卡页面切换,微信小程序,微信小程序,前端,javascript

选项卡效果切换如下：滑动即可对应切换

微信小程序选项卡页面切换,微信小程序,微信小程序,前端,javascript

wxml代码

<view class='TabSwiper'>
    <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'>1.游戏</view></swiper-item> 
  <swiper-item><view class='swiper_con'>2.专题</view></swiper-item>
  <swiper-item><view class='swiper_con'>3.挑战</view></swiper-item>  
</swiper>

wxss代码：

.tab{
   float: left;
   width: 33.3333%;
   text-align: center;padding: 10rpx 0;
 }
.TabSwiper{  
  width: 100%;
  height: 150rpx;
  line-height: 150rpx;
  display: flex;
  flex-direction: row;
  background-color: rgb(248, 248, 248);
  }
.tabBorer{
   border-bottom: 1px solid blue; 
   color: blue;
}
.swiper{
  width: 100%;
}
.swiper_con{
  text-align: center;
  width: 100%; 
  height: 100%; 
  padding: 80rpx 0;
}

js代码：文章来源地址https://www.toymoban.com/news/detail-600896.html

Page({
  data: {
    currentData: 0,
  },
  //获取当前滑块的index
  bindchange: function (e) {
    const that = this;
    that.setData({
      currentData: e.detail.current
    })
  },
  onLoad: function () {
  },
 
  //点击切换，滑块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
      })
    }
  }
 
 
})

到了这里，关于微信小程序选项卡页面切换的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！