微信小程序顶部选项卡在开发中是非常常用的，下面用一点时间实现了一下。
效果图：
下面直接上代码:
wxml:
选项一 选项二 选项三 页面一 页面二 页面三
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 () {
}
})
以上是实现过程，总体上没什么难度。可以参考参考。
如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
