小程序页面中tab简单实现2种方案

第一种方法适合较少的tab选项

这是wxml页面

小说

文学

名著

我是小说 我是文学 我是名著 这是css .normal{ text-align: center; height: 90rpx; line-height: 90rpx; font-size: 30rpx; color: #333333 } .normal.active{ width: 90rpx; text-align: center; height: 90rpx; line-height: 90rpx; color: #1bae82; font-size: 30rpx; background-color: #ffffff; position: relative;

}
.normal.active:after {
content: “”;
display: block;
height: 6rpx;
width: 32rpx;
background:rgba(51,183,229);
position: absolute;
left: 27rpx;
bottom: 0;
border-radius: 3rpx;
font-size: 30rpx;

}
.tab{
display: flex;
justify-content: space-around;
background: #999999;
height: 90rpx;
}
js页面
data: {
types: [“小说”, “文学”, “名著”],
cutTab:0
},

/**

• 生命周期函数–监听页面加载
  */
  onLoad: function (options) {
  this.setData({
  cutTab: 0,
  })
  },
  点击事件
  switchNav: function (e) {

var tab = e.currentTarget.dataset.currents
this.setData({
  cutTab: tab,
 
});

console.log(this.data.cutTab)

},
效果

第二种方法适合渲染tab，较多内容的时候

这是wxml页面

{{item}}


{{item}}
js页面
/**

• 页面的初始数据
  */
  data: {
  types: [“小说”, “文学”, “名著”],
  cutTab:0
  },

/**

• 生命周期函数–监听页面加载
  */
  onLoad: function (options) {
  this.setData({
  cutTab: 0,
  })
  },
  点击事件同上
  效果图如下