单排效果图如上。
wxml:
<view class='chooseTitle'>
<view class='choose' wx:for="{{timeArray}}" wx:key="item.id">
<view class="itemName {{num==index?'cur':''}}" bindtap='switchTab' data-index='{{index}}' data-id='{{item.id}}'>{{item}}</view>
</view>
</view>
js:
switchTab: function (e) {
console.log(e)
var index = parseInt(e.currentTarget.dataset.index)
this.setData({
num: index
})
},
ps:cur为点击后的class样式名。
pss:js中需要为num添加一个初始值
data: {
num: 0
},
但是我需要做成这种效果图:
or
我使用的方法如下:
wxml:
<view class='chooseTitle'>
<view class='choose' wx:for="{{timeArray}}" wx:key="item.id">
<view class="itemName {{num==index?'cur':''}}" bindtap='switchTab' data-index='{{index}}' data-id='{{item.id}}'>{{item}}</view>
</view>
</view>
<view class='chooseTitle'>
<view class='choose' wx:for="{{monArray}}" wx:for-index="bindex" wx:key="item.id">
<view class="itemName {{num==(bindex + 5 )?'cur':''}}" bindtap='switchTab' data-bindex='{{bindex}}' data-id='{{item.id}}'>{{item}}</view>
</view>
</view>
js:
switchTab: function (e) {
if (e.currentTarget.dataset.index !== undefined) {
var index = parseInt(e.currentTarget.dataset.index)
} else if (e.currentTarget.dataset.bindex !== undefined) {
var index = ( parseInt(e.currentTarget.dataset.bindex) + 5 )
}
console.log(e)
var that = this
this.setData({
num: index
})
switch (index) {
case 0:
console.log('0000');
break;
case 1:
console.log('1111');
break;
case 2:
console.log('2222');
break;
case 3:
console.log('3333');
break;
case 4:
console.log('4444');
break;
case 5:
console.log('5555');
break;
case 6:
console.log('6666');
break;
case 7:
console.log('7777');
break;
case 8:
console.log('8888');
break;
case 9:
console.log('9999');
break;
default:
console.log('default');
}
},
这样就可以在两行中随意选择一个item了