小程序-tabBar简易版

时间：2019-12-20 22:32:38 阅读：113 评论：0 收藏：0 [点我收藏+]

<!-- 结构 -->
<view class="wrapper">
 <block wx:for="{{desc}}">
 <view bindtap="toggle" data-index="{{index}}" class="{{descIndex===index?‘active‘:‘‘}}">{{item}}</view>
 </block>
</view>
<view wx:if="{{descIndex===0}}">
 商品详情
</view>
<view wx:if="{{descIndex===1}}">
 产品参数
</view>
<view wx:if="{{descIndex===2}}">
 售后保障
</view>

/* 样式 */
.wrapper{
 display: flex;
 justify-content: space-around;
}
.wrapper view{
 flex: 1;
 text-align: center;
 line-height: 100rpx;
 border-bottom: 1rpx solid #ccc;
}
.wrapper .active{
 color: red;
 font-weight: bold;
 border-bottom: 1rpx solid red;
}

Page({
    data: {
        desc: ["商品详情", "产品参数", "售后保障"],
        descIndex: 0,
    },
    toggle(e) {
        this.setData({
            descIndex: e.currentTarget.dataset.index
        })
    },
})

技术分享图片

小程序-tabBar简易版

原文：https://www.cnblogs.com/wuqilang/p/12075298.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)