android – Enthält die Weex-Liste ein ausgewähltes Ereignis?
phpcn_u1582
phpcn_u1582 2017-05-16 13:28:43
0
2
691

Wie beim Titel möchte ich erkennen, dass diese Zelle ihre Farbe ändert, wenn ich auf sie klicke, um sie von anderen Zellen zu unterscheiden, und dass es sich um eine einzelne Auswahl handelt. Oder wie man das Zellobjekt basierend auf dem Index in der Liste erhält

phpcn_u1582
phpcn_u1582

Antworte allen(2)
滿天的星座

在css中使用 active伪类

<template>
  <p>
    <list class="list">
      <cell
        v-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...

过去多啦不再A梦

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

希望能够帮到你

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage