微信小程序tab切换效果
话不多说，先上效果图
主要是让在一个WXML上面显示2个页面，用来分页展示东西。
直接上代码了：
首先是wxml
{{item}}
A页
B页
然后是wxcss样式代码
.tabNav {
z-index: 4;
top: 0;
left: 0;
width: 100%;
height: 80rpx;
line-height: 80rpx;
background: #fff;
display: flex;
padding: 0 30rpx;
border-bottom: 1px solid #f5f5f5;
box-sizing: border-box;
}
.tabNav> view {
text-align: center;
margin-right: 50rpx;
}
.tabNav> view:last-child {
margin-right: 0;
}
.tabNav> view text {
padding: 0 15rpx;
height: 75rpx;
display: inline-block;
}
.tabNav .cur text {
border-bottom: 5rpx solid #36ccf9;
color: #000;
}
.tabshow{
visibility: visible;
display: block;
}
.tabhide{
visibility: hidden;
display: none;
}
然后是wxjs代码
// pages/movieindex/movieindex.js
Page({
/**
* 页面的初始数据
*/
data: {
navTab: ['热映', '待映'],
currentTab: 0,
sendList: ['AA','BB'],
tab1:'tabshow',
tab2:'tabhide'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
currentTab: function (e) {
if (this.data.currentTab == e.currentTarget.dataset.idx) {
return;
}
this.setData({
currentTab: e.currentTarget.dataset.idx
})
if (e.currentTarget.dataset.idx==0)
{
this.setData({ tab1: "tabshow" });
this.setData({ tab2: "tabhide" });
} else if (e.currentTarget.dataset.idx == 1)
{
this.setData({ tab1: "tabhide" });
this.setData({ tab2: "tabshow" });
}
// 如果多个tab的话，在这里加就行了
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
直接把上面3段代码加上，你的WXML就可以实现分页效果，重点的是JS的事件，主要看currentTab这个方法，这个里面就是点击某个TAB的时候，让页面的VIEW进行显示和隐藏。
https://developers./miniprogram/dev/framework/
