使用iview weapp组件 写小程序 tab切换

 

wxml:

<i-row class="tab_question">
<i-col span="24" i-class="col-class">
<i-tabs current="{{ current }}" color="#f759ab" bindchange="handleChange" >
<i-tab wx:for="{{type}}"
wx:key="{{index}}"
key="tab{{index+1}}"
id="{{index}}"
title="{{item.typename}}"
>
</i-tab>
</i-tabs>
<i-cell-group wx:for="{{type}}" wx:key="{{index}}" class="right-item {{current=='tab'+(index+1) ? 'active' : ''}}">
<i-cell
wx:for="{{item.question}}"
wx:key="{{index}}"
title="{{item.question}}"
data-id="{{item.id}}"
bindtap="answerChange"
>
</i-cell>
</i-cell-group>
</i-col>
</i-row>

js:

handleChange ({ detail }) {
this.setData({
current: detail.key,
show: detail.key
});
},

css:

.right-item{display: none}
.active{display: block}

转载于:https://www.cnblogs.com/wjhaaa/p/9805576.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值