微信小程序实现tab页面切换功能

前端之家收集整理的这篇文章主要介绍了微信小程序实现tab页面切换功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果图如下所示:

wxml

{{content}}

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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的微信小程序相关文章