效果图如下所示：
wxml
rush:js;">
{{content}}
wxss
rush:js;">
.ip_tab_comtainer {
width: 100%;
background-color: #F5F5F5;
padding: 20rpx 0 0;
white-space: Nowrap;
}
.ip_tab_comtainer_padd {
display: inline-block;
width: 24rpx;
}
.ip_tab_item_s {
display: inline-block;
line-height: 40rpx;
padding: 12rpx 32rpx;
color: #91daf9;
margin-right: 8rpx;
margin-left: 8rpx;
font-size: 28rpx;
overflow: hidden;
background-color: #ffffff;
border: 1px solid #91daf9;
}
.ip_tab_item_n {
display: inline-block;
padding: 12rpx 32rpx;
line-height: 40rpx;
color: #353535;
margin-right: 8rpx;
background-color: #ffffff;
margin-left: 8rpx;
font-size: 28rpx;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 4rpx;
border: 1px solid #CCCCCC;
}
/**
去除横向滚动条
*/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.content{
width: 100%;
}
js
rush:js;">
// pages/horizontal-scroll_tab/horizontal-scroll_tab.js
Page({
/**
* 页面的初始数据
*/
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 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
