小程序-tabBar简易版

时间：2019-12-21 00:36:15 阅读：150 评论：0 收藏：0 [点我收藏+]

标签：play family lock content order mil col lex image

<!-- 结构 -->
<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简易版

标签：play family lock content order mil col lex image

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行