index.wxml
<view class="tabs-box">
<block class="itemtitle" wx:for="{{['商品详情','产品参数','售后保障']}}" wx:key="item">
<view class="tabs-item {{currentTabsIndex == index ? 'selected' : ''}}" bindtap="onTabsItemTap" data-index="{{index}}">
{{item}}
</view>
</block>
</view>
<view class="product-detail-box">
<view class="product-detail-imgs" hidden="{{currentTabsIndex != 0}}">
商品详情
</view>
<view class="product-detail-properties" hidden="{{currentTabsIndex != 1}}">
产品参数
</view>
<view class="product-detail-protect" hidden="{{currentTabsIndex != 2}}">
售后保障
</view>
</view>
index.js
Page({
data: {
select: 0,
},
onLoad(options) {
},
onTabsItemTap: function (event) {
var index = event.currentTarget.dataset.index;
this.setData({
currentTabsIndex: index
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
index.wxss
.tabs-item {
width: 33.3%;
float: left;
color: #C7C7CB;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
display: flex;
border-bottom: 1rpx solid #D0D0D7;
}
.tabs-item.selected {
/*color: #AB956D;*/
color: rgba(171,149,109,.8);
/*border-bottom: 2px solid #AB956D;*/
border-bottom: 2px solid rgba(171,149,109,.8);
}
来源：https://www.jianshu.com/p/60a42e114aec