weex 的list 有选中事件么

Question

如题，我想实现点击一个cell 那个cell就变色与其他的cell区分开 而且是单选 或者说list该怎么根据index来获取cell对象

Answer 1

在css中使用 active伪类

<template>
  <div>
    <list class="list">
      <cell
        v-for="(v,i) in rows"
        append="tree"
        :index="i"
        :key="i"
        class="row">
        <div class="item">
          <text class="item-title">row {{v.id}}</text>
        </div>
      </cell>
    </list>
</text>
  </div>
</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...

Answer 2

要实现类似单选的效果，大概可以这么做：
通过当前行的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;
         }
    }
}

希望能够帮到你

Answer 3

这个问题困扰了我好久，weex-ui里面的weex-radio单选组件又不好用，选中时一直跳，结合楼上的demo,自己研究试着解决了，希望能帮到更多看到问题的人。这个我改版的demo是用eros写的，toast换回weex的即可，其他无异。
https://www.jianshu.com/p/d82...