您的位置:首页 > 移动开发 > 微信开发

微信小程序遍历循环中点击添加样式

2017-12-28 17:06 971 查看
.wxml中:
<block wx:for="{{searchSongList}}" wx:key='unique'>
<block wx:if="{{index == clickId}}">
<view class="result-item" style="background:{{color}}" id="{{index}}" bindtap="chooseLocation" data-data="{{item}}">
<text class="title" >{{item.NVC_PROVINCE}}{{item.NVC_SERVICE_NAME}}---{{item.NVC_FARM_NAME}}</text>
</view>
</block>
<block wx:else>
<view class="result-item" id="{{index}}" bindtap="chooseLocation" data-data="{{item}}">
<text class="title">{{item.NVC_PROVINCE}}{{item.NVC_SERVICE_NAME}}---{{item.NVC_FARM_NAME}}</text>
</view>
</block>
</block>


.js中:
chooseLocation: function (event) {
let that = this
var cla = event.currentTarget.id
that.setData({
'color': '#00EEEE',
'clickId':cla
});
}


效果如下图:每次选择其中一个就会改变他的背景色

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: