如图,实现如下的效果。点击三个 tab button,分别切换到不同页面
商品详情 产品参数 售后保障思路
可以利用点击不同按钮,然后显示与隐藏界面来实现-
代码
首先是三个按钮
<view class="tabs-box">
<block wx:for="{{['商品详情','产品参数','售后保障']}}" wx:key="item">
<view class="tabs-item {{currentTabsIndex == index ? 'selected' : ''}}" bindtap="onTabsItemTap" data-index="{{index}}">
{{item}}
</view>
</block>
</view>
根据当前选中的 tab button,切换到不同的 css 样式
class="tabs-item {{currentTabsIndex == index ? 'selected' : ''}}"
.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);
}
这是添加点击事件监听器
bindtap="onTabsItemTap"
这是给每一个 tab button 绑定一个数据,点击 tab button 的时候,就改变 currentTabsIndex 的值
onTabsItemTap: function (event) {
var index = event.currentTarget.dataset.index;
this.setData({
currentTabsIndex: index
});
}
显示与隐藏界面,可以使用 hidden
属性来实现
<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>
总结
- 两套 css 样式
- 条件判断
- hidden 属性
网友评论