微信小程序顶部选项卡在开发中是非常常用的,下面用一点时间实现了一下。
效果图:
下面直接上代码:
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 () { } })
以上是实现过程,总体上没什么难度。可以参考参考。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。