index.wxml
<view class='detail-bottom-box'>
//选项卡标题
<view class='tabs-box'>
<block wx:for="{{['商品详情','产品参数','售后保障']}}">
<view bindtap='onTabsItemTap' data-index='{{index}}' class="tabs-item {{currentTabsIndex==index?'selected':''}}">
{{item}}
</view>
</block>
</view>
//选项卡内容
<view class='product-detail-box'>
//index:0
<view hidden="{{currentTabsIndex!=0}}" class='product-detail-imgs'>
<block wx:for="{{product.imgs}}">
<image mode="aspectFit" src="{{item.img_url.url}}"></image>
</block>
</view>
//index:1
<view hidden="{{currentTabsIndex!=1}}">
<block wx:for="{{product.properties}}">
<view class='properties-item'>
<view class='properties-name'>{{item.name}}</view>
<view class='properties-detail'>{{item.detail}}</view>
</view>
</block>
</view>
//index:2
<view class='product-detail-protect' hidden="{{currentTabsIndex!=2}}">
<view>七天无理由退货</view>
</view>
</view>
</view>
index.js
Page({
data: {
currentTabsIndex: 0
},
onTabsItemTap:function(event){
this.setData({
//currentTabsIndex: event.currentTabsIndex
currentTabsIndex: event.currentTarget.dataset.index
});
console.log(event.currentTarget.dataset.index)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
index.wxss
.detail-bottom-box {
margin-top: 30rpx;
}
.tabs-box {
height: 90rpx;
display: flex;
justify-content: space-between;
margin-bottom: 15rpx;
}
.tabs-item {
width: 33.3%;
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);
}
.product-detail-box {
padding-bottom: 20rpx;
}
.product-detail-imgs image {
width: 100%;
height: 400rpx;
float: left;
}
.product-detail-properties,
.product-detail-protect {
min-height: 80vh;
}
.properties-item {
display: flex;
margin: 25rpx 0;
font-size: 24rpx;
}
.properties-name {
width: 160rpx;
color: #808080;
text-align: center;
}
.properties-detail {
flex: 1;
color: #333;
padding-right: 40rpx;
}
.product-detail-protect view {
font-size: 24rpx;
color: 808080;
text-align: center;
margin-top: 30rpx;
}
来源：https://blog.csdn.net/sinat_37390744/article/details/90028151