效果圖
.wxml頁面
<!--?nav導航?-->
<view?class="goods">
??<block?wx:for="{{tab}}"?wx:key="key">
????<view?class="{{item.style}}"?bindtap="tarClick"?data-index="{{index}}">{{item.titcle}}</view>
??</block>
</view>
<!--導航下??視圖滑塊?-->
<swiper?bind:change="changeTab"?current="{{index}}">
???<block>
?????<swiper-item>
?????<text>11111</text>
?????</swiper-item>
?????<swiper-item>
?????<text>2222</text>
?????</swiper-item>
?????<swiper-item>
?????<text>3333</text>
?????</swiper-item>
???</block>
</swiper>
.js頁面
Page({
????data:?{
???????tab:[
?????????{titcle:"商品參數(shù)",style:"color"},?
?????????{titcle:"商品介紹",style:""},
?????????{titcle:"商品規(guī)格",style:""},
????????],
????????index:0,
???????goods:''
????},
???????tarClick(e){
??????????//??console.log(e.currentTarget.dataset.index)
???????????let?tab?=?this.data.tab;
??????????let?that?=?this;
??????????let?index?=?e.currentTarget.dataset.index
???????????console.log(index)
??????????tab.map((item,key)=>{
???????????if(key==index)
???????????{
??????????????tab[key]['style']='color';
???????????}else{
?????????????tab[key]['style']='';
???????????}
??????????})
??????????that.setData({tab,index})
???????},changeTab(e){
??????????console.log(e.detail.current)
??????????let?tab?=?this.data.tab;
??????????let?that?=?this;
??????????let?index?=?e.detail.current
???????????console.log(index)
??????????tab.map((item,key)=>{
???????????if(key==index)
???????????{
??????????????tab[key]['style']='color';
???????????}else{
?????????????tab[key]['style']='';
???????????}
??????????})
??????????that.setData({tab,index})
???????},
}）
.wxss頁面
/*?pages/details/details.wxss?*/
.goods{
????width:?100%;
????height:?100rpx;
????/*?background-color:yellowgreen;?*/
????display:flex;
????justify-content:?space-around;
????align-items:?center;
}
.goods?view{
????width:?160rpx;
????height:?100rpx;
????display:?flex;
????justify-content:?center;
????align-items:?center;
}
.color{
????color:?red;
????border-bottom:?2px?solid?red;
}
