效果图
.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:"商品参数",style:"color"},
{titcle:"商品介绍",style:""},
{titcle:"商品规格",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;
}
