微信小程序之头部选项卡和左侧选项卡

最新推荐文章于 2024-07-10 21:32:33 发布

面壁思过程

最新推荐文章于 2024-07-10 21:32:33 发布

阅读量4.4k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序头部选项卡微信小程序左侧选项卡

本文链接：https://blog.csdn.net/Candy_mi/article/details/80109705

版权

微信小程序专栏收录该内容

41 篇文章 1 订阅

订阅专栏

1.写死

//wxml

<view class="swiper-tab">

<view class="swiper-tab-list {{Tab==0 ? 'active' : ''}}" data-current="0" bindtap="swichNav">0000000000</view>

<view class="swiper-tab-list {{Tab==1 ? 'active' : ''}}" data-current="1" bindtap="swichNav">1111111111</view>

<view class="swiper-tab-list {{Tab==2 ? 'active' : ''}}" data-current="2" bindtap="swichNav">2222222222</view>

<view class="swiper-tab-list {{Tab==3 ? 'active' : ''}}" data-current="3" bindtap="swichNav">3333333333</view>

<view class="swiper-tab-list {{Tab==4 ? 'active' : ''}}" data-current="4" bindtap="swichNav">4444444444</view>

</view>



<view class="right">

<view class="right-item {{Index=='0' ? 'active' : ''}} ">tab-bd00</view>

<view class="right-item {{Index=='1' ? 'active' : ''}} ">tab-bd01</view>

<view class="right-item {{Index=='2' ? 'active' : ''}} ">tab-bd02</view>

<view class="right-item {{Index=='3' ? 'active' : ''}} ">tab-bd03</view>

<view class="right-item {{Index=='4'? ' active ' : ' '}}">tab-bd04</view>

</view>

//三元运算符判断如果currentTab==当前被点击的 data-current时，添加avtive样式否则为不添加样式

//wxss

.swiper-tab .active{

color:red;

}

.right .active{

display: block;

}

.right-item{

display: none;

}



//js



Page({

data: {

Tab: 0,  //默认第一项显示为当前

Index:0

},



/**

* 点击tab切换

*/

swichNav: function (e) {

var that = this;

//让被点击的项的currentTab与data-current对应

if (that.data.Tab === e.target.dataset.current) {

return false;

} else {

that.setData({

Tab: e.target.dataset.current,

Index: e.target.dataset.current,

})

}

},



})



2.循环法（适用于通过后台数据进行操作的选项卡）







<!--index.wxml-->

<view class='Choose_left left'>

<view class="list_item1 {{curIndex==index?'active':''}}" wx:for="{{simulation1}}" wx:for-index='index' data-index='{{index}}' bindtap='change_item2'>

{{item}}

</view>

</view>



<view class='Choose_right right' >

<view class='list_item2' wx:for="{{simulation2_1[curIndex].index1}}" wx:for-index='index' data-index='{{index}}' >

{{item}}

</view>

</view>









/**index.wxss**/



.left{

float: left;

}



.right{

float: right;

}

.Choose_left{

width: 20%;

height: auto;

}



.Choose_right{

width: 77%;

height: auto;

}



.list_item1,.list_item2{

height: 80rpx;

line-height: 80rpx;

text-align: center;

border: 1px solid #ccc;

}



.list_item1,.list_item2{

border-top: none;

}



.active{

background:#ccc;

color: #fff;

}

//index.js

Page({

data: {

simulation1: ['北京', '上海', '广东', '浙江', '北京', '上海', '广东', '浙江'],



simulation2_1: [

{ index1: ['北京', '北京', '北京', '北京', '北京', '北京', '北京', '北京']},

{ index1: ['上海', '上海', '上海', '上海', '上海', '上海', '上海', '上海'] },

{ index1: ['广东', '广东', '广东', '广东', '广东', '广东', '广东', '广东'] },

{ index1: ['浙江', '浙江', '浙江', '浙江', '浙江', '浙江', '浙江', '浙江'] },

{ index1: ['北京', '北京', '北京', '北京', '北京', '北京', '北京', '北京'] },

{ index1: ['上海', '上海', '上海', '上海', '上海', '上海', '上海', '上海'] },

{ index1: ['广东', '广东', '广东', '广东', '广东', '广东', '广东', '广东'] },

{ index1: ['浙江', '浙江', '浙江', '浙江', '浙江', '浙江', '浙江', '浙江'] }

],



curIndex: 0,

},







change_item2: function (e) {

var that = this;

var index = e.currentTarget.dataset.index;

if (that.data.curIndex == index) {

return;

}

else {

that.setData({

curIndex: index,

})

}

},

onLoad: function (options) {

}

})