关于微信小程序实现顶部选项卡(swiper)的介绍-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

关于微信小程序实现顶部选项卡(swiper)的介绍

这篇文章主要为大家详细介绍了微信小程序实现顶部选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

微信小程序顶部选项卡在开发中是非常常用的，下面用一点时间实现了一下。

效果图：

下面直接上代码:

wxml:

<!--pages/index/index.wxml--> <view class="swiper-tab">  <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">选项一</view>  <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">选项二</view>  <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">选项三</view> </view>  <swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight - 30}}px" bindchange="bindChange">  <swiper-item>   <view>页面一</view>  </swiper-item>  <swiper-item>   <view>页面二</view>  </swiper-item>  <swiper-item>   <view>页面三</view>  </swiper-item> </swiper>

登录后复制

wxss:

/* pages/index/index.wxss */ .swiper-tab{  width: 100%;  text-align: center;  line-height: 80rpx;  border-bottom: 1px solid #000;  display: flex;  flex-direction: row;  justify-content: center; } .tab-item{  flex: 1;  font-size: 30rpx;  display: inline-block;   color: #777777; } .on{  color: red;  border-bottom: 5rpx solid red; } .swiper{ display: block; height: 100%; width: 100%; overflow: hidden; } .swiper view{  text-align: center;  padding-top: 100rpx; }

登录后复制

js:

// pages/index/index.js Page({   /**   * 页面的初始数据   */  data: {   winWidth:0,   winHeight:0,   currentTab:0  },   /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {   var that = this;    /**    * 获取系统信息    */   wx.getSystemInfo({     success: function (res) {     that.setData({      winWidth: res.windowWidth,      winHeight: res.windowHeight     });    }    });  },  bindChange: function (e) {    var that = this;   that.setData({ currentTab: e.detail.current });   },  swichNav: function (e) {    var that = this;    if (this.data.currentTab === e.target.dataset.current) {    return false;   } else {    that.setData({     currentTab: e.target.dataset.current    })   }  } ,  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {   },   /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {   },   /**   * 用户点击右上角分享   */  onShareAppMessage: function () {   } })

登录后复制

以上是实现过程，总体上没什么难度。可以参考参考。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！