问题描述
如题，我想实现点击一个cell 那个cell就变色与其他的cell区分开 而且是单选 或者说list该怎么根据index来获取cell对象
问题解答
回答1：在css中使用 active伪类
<template> <p> <list class='list'> <cellv-for='(v,i) in rows'append='tree':index='i':key='i'class='row'><p class='item'> <text class='item-title'>row {{v.id}}</text></p> </cell> </list></text> </p></template><style scoped> .list { height:850px } .count { font-size: 48px; margin:10px; } .indicator { height: 40px; width: 40px; color:#45b5f0; } .row { width: 750px; } .item { justify-content: center; border-bottom-width: 2px; border-bottom-color: #c0c0c0; height: 100px; padding:20px; } .item:active { background-color: #00BDFF; } .item-title { }</style>
具体参考http://weex.apache.org/cn/ref...
回答2：要实现类似单选的效果，大概可以这么做：通过当前行的selected字段来判断是否被选中，从而改变background-colorDom结构如下：
<list><cell v-for='(item,index) in listData' v-bind: @click='onSelected(item,index)'><p><text>{{item.text}}</text></p></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; } }}
希望能够帮到你
