介绍 & lt; scroll-view scroll-x=皌rue",类=癷p_tab_comtainer"比;
,& lt; view 类=癷p_tab_comtainer_padd"祝辞& lt;/view>
,& lt; block wx:=皗{ips}},,天气:项=癷p",天气:关键=皗{ip.id}}“比;
& lt;才能view 类=皗{ip.isSelect ? & # 39; ip_tab_item_s& # 39;: & # 39; ip_tab_item_n& # 39;}}“, bindtap=皁nIpItemClick",天气:关键=皗{ip.id}}“,数据项=皗{ip}}“比;
,,{{ip.title}}
& lt;才能/view>
,& lt;/block>
,& lt; view 类=癷p_tab_comtainer_padd"祝辞& lt;/view>
& lt;/scroll-view>
& lt; view 类=& # 39;内容# 39;比;
{{内容}}
& lt;/view> .ip_tab_comtainer {
,,宽度:100%;
,,背景颜色:# F5F5F5;
,,填充:20 rpx 0, 0;
,,空白:nowrap;}
}
.ip_tab_comtainer_padd {
,,显示:inline-block;
,,宽度:24 rpx;
}
.ip_tab_item_s {
,,显示:inline-block;
,,行高:40 rpx;
,,填充:12 rpx 32 rpx;
,,颜色:# 91 daf9;
,,margin-right: 8 rpx;
,,margin-left: 8 rpx;
,,字体大小:28 rpx;
,,溢出:隐藏。
,,背景颜色:# ffffff;
边境才能:1 px solid # 91 daf9;
}
.ip_tab_item_n {
,,显示:inline-block;
,,填充:12 rpx 32 rpx;
,,行高:40 rpx;
,,颜色:# 353535;
,,margin-right: 8 rpx;
,,背景颜色:# ffffff;
,,margin-left: 8 rpx;
,,字体大小:28 rpx;
,,text-align:中心;
,,溢出:隐藏。
,,文本溢出:省略;
,,这个特性:4 rpx;
边境才能:1 px solid # CCCCCC;
}/* *
去除横向滚动条
*/::-webkit-scrollbar {
,,宽度:0;
,,身高:0;
,,颜色:透明;
}
.content {
,宽度:100%;
} //,/horizontal-scroll_tab/horizontal-scroll_tab.js页面
页面({/* *
*,才能页面的初始数据
,*/,数据:{
“诱导多能性”:,才能
,,{,id:“1“,,标题:,“日统计,,,isSelect: true },
,,{,id:“2“,,标题:,“月统计,,,isSelect:,假},
,,{,id:“3“,,标题:,“年统计,,,isSelect:,假},
,,,
内容:“才能全部“
},/* *
*,才能生命周期函数——监听页面加载
,*/,onLoad: function (选项),{
},/* *
*,项目才能点击事件
,*/,onIpItemClick: function (事件),{
console.log才能(事件);
var 才能;id =, event.currentTarget.dataset.item.id;
var 才能;curIndex =, 0;
for 才能;(var 小姐:=,0;,小姐:& lt;, this.data.ips.length;,我+ +),{
,,if (id ==, this.data.ips[我].id), {
,,,this.data.ips[我].isSelect =,真的;
,,,curIndex =,我;
,,},{else
,,,this.data.ips[我].isSelect =,假;
,,}
,,}
this.setData({才能
,,,内容:this.data.ips curIndex .title,
,,,ips: this.data.ips,
,,});
},
})
怎么在微信小程序中实现选项卡页面切换功能吗?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
wxml
wxs
js
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。
