欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序?qū)崿F(xiàn)tab更換頁面效果

 更新時(shí)間：2022年07月06日 15:02:49   作者：小雅雅家的小凱凱吖  
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)tab更換頁面效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)tab更換頁面效果的具體代碼，供大家參考，具體內(nèi)容如下

.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="" data-item="{{ip}}">
? ?{{ip.title}}
? </view>
?</block>
?<view class="ip_tab_comtainer_padd"></view>
</scroll-view>
<view class='content'>
<block>
<view class="content1" wx:if="{{content=='日統(tǒng)計(jì)'}}">{{content}}</view>
<view class="content2" wx:if="{{content=='月統(tǒng)計(jì)'}}">{{content}}</view>
<view class="content3" wx:if="{{content=='年統(tǒng)計(jì)'}}">{{content}}</view>
</block>
</view>

.wxss

page{
?
? width: 100%;
? height: 100%;
?
}
?
.ip_tab_comtainer {
?
? width: 100%;
? background-color: #F5F5F5;
? padding: 20rpx 0 0;
? white-space: nowrap;
?
}
?
.ip_tab_comtainer_padd {
?
? display: inline-block;
? ?width: 5%;?
?
}
?
.ip_tab_item_s {
?
? width: 30%;
? display: inline-block;
? line-height: 40rpx;
? text-align: center;
? color: #91daf9;
? font-size: 28rpx;
? overflow: hidden;
? background-color: #ffffff;
? border: 1px solid #91daf9;
?
}
?
.ip_tab_item_n {
?
? width: 30%;
? display: inline-block;
? text-align: center;
? line-height: 40rpx;
? color: #353535;
? background-color: #ffffff;
? font-size: 28rpx;
? text-align: center;
? overflow: hidden;
? text-overflow: ellipsis;
? border-radius: 4rpx;
? border: 1px solid #CCCCCC;
?
}
?
?
/**
去除橫向滾動(dòng)條
*/
?
::-webkit-scrollbar {
?
? width: 0;
? height: 0;
? color: transparent;
?
}
?
.content{
?
? width: 100%;
? height: 100%;
? display: flex;
? background-color: #CCCCCC;
??
?}
?
?
.content1{
?
? width: 100%;
? height: 100%;
? display: flex;
? background-color: #6b10e0;
?
?}
?
?.content2{
?
? width: 100%;
? height: 100%;
? display: flex;
? background-color: #d41515;
?
?}
?
?.content3{
?
? width: 100%;
? height: 100%;
? display: flex;
? background-color: #1ac729;
?
?}

.js

?/**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? ips: [
? ? ? { id: "1", title: "日統(tǒng)計(jì)", isSelect:true },
? ? ? { id: "2", title: "月統(tǒng)計(jì)", isSelect: false},
? ? ? { id: "3", title: "年統(tǒng)計(jì)", isSelect: false},
? ? ?],
? ? content: "日統(tǒng)計(jì)"
??
? },
? /**
? * item點(diǎn)擊事件
? */
?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,
? });
?},

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論