weex 的list 有选中事件么

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

阅读 4.7k
3 个回答

在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...

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题