效果图如下所示：
wxml
wxss
去除横向滚动条
*/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.content{
width: 100%;
}
js
页面的初始数据
*/
data: {
ips: [
{ id: "1",title: "日统计",isSelect:true },{ id: "2",title: "月统计",isSelect: false},{ id: "3",title: "年统计",],content:"全部"
},/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},/**
* item点击事件
*/
onIpItemClick: function (event) {
console.log(event);
var id = event.currentTarget.dataset.item.id;
var curIndex = 0;
for (var i = 0; i < this.data.ips.length; i++) {
if (id == this.data.ips[i].id) {
this.data.ips[i].isSelect = true;
curIndex = i;
} else {
this.data.ips[i].isSelect = false;
}
}
this.setData({
content: this.data.ips[curIndex].title,ips: this.data.ips,});
},})
总结
以上所述是小编给大家介绍的微信小程序实现tab页面切换功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/weapp/31528.html