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

效果图如下所示:

wxml

<scroll-view scroll-x="true" class="ip_tab_comtainer">

<view class="ip_tab_comtainer_padd"></view>

<block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}">

<view class="{{ip.isSelect?'ip_tab_item_s':'ip_tab_item_n'}}" bindtap="onIpItemClick" wx:key="{{ip.id}}" data-item="{{ip}}">

{{ip.title}}

</view>

</block>

<view class="ip_tab_comtainer_padd"></view>

</scroll-view>

<view class='content'>

{{content}}

</view>

wxss

.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

// pages/horizontal-scroll_tab/horizontal-scroll_tab.js

Page({

/**

* 页面的初始数据

*/

data: {

ips: [

{ id: "1", title: "日统计", isSelect:true },

{ id: "2", title: "月统计", isSelect: false},

{ id: "3", title: "年统计", isSelect: false},

],

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页面切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是 微信小程序实现tab页面切换功能 的全部内容, 来源链接: utcz.com/z/353084.html

回到顶部