如题,我想实现点击一个cell 那个cell就变色与其他的cell区分开 而且是单选 或者说list该怎么根据index来获取cell对象
要实现类似单选的效果,大概可以这么做:
通过当前行的selected字段来判断是否被选中,从而改变background-color
Dom结构如下:
<list>
<cell v-for="(item,index) in listData" v-bind:style="{'background-color':(item.selected?'#dddddd':'#ffffff')}" @click="onSelected(item,index)">
<div>
<text>{{item.text}}</text>
</div>
</cell>
</list>
js结构如下:
data: {
"listData": [
{'text': '开发者头条', selected: false},
{'text': '腾讯新闻', selected: false},
{'text': '搜狐娱乐', selected: false},
{'text': '优酷视频', selected: false}
]
},
methods:{
"onSelected":function(item,index){
if (item.selected) {
this.listData[index].selected = false;
} else {
this.listData[index].selected = true;
}
}
}
希望能够帮到你
这个问题困扰了我好久,weex-ui里面的weex-radio单选组件又不好用,选中时一直跳,结合楼上的demo,自己研究试着解决了,希望能帮到更多看到问题的人。这个我改版的demo是用eros写的,toast换回weex的即可,其他无异。
https://www.jianshu.com/p/d82...
2 回答1.3k 阅读✓ 已解决
2 回答2.6k 阅读
2 回答1.7k 阅读
1 回答2.1k 阅读
1 回答1.1k 阅读
1 回答1.3k 阅读
1.3k 阅读
在css中使用 active伪类
具体参考http://weex.apache.org/cn/ref...