需求

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

样式一：

• 点击cell时，改变cell的背景色。

  
  

<template>
    <div>
        <list>
            <cell v-for="(item,index) in listData" v-bind:style="{'background-color':((radio && index === currentIndex)?'#dddddd':'#ffffff')}" @click="onRadio(index)">
                <div class="cell">
                    <text class="item">{{item.text}}</text>
                </div>
            </cell>
        </list>
    </div>
</template>
<script>
export default {
  data: {
    radio: false,
    currentIndex: 0,
    listData: [
      { text: '开发者头条' },
      { text: 'Android开发艺术探索' },
      { text: 'Google' },
      { text: '梅长苏' },
      { text: '马刺总冠军' }
    ]
  },
  methods: {
    onRadio(index) {
      if (this.currentIndex !== index && this.radio === true) {
        this.currentIndex = index
        this.radio = true
      } else {
        this.currentIndex = index
        this.radio = !this.radio
      }
        this.$set(this.listData, index, this.listData[index])
      if (this.radio && index === this.currentIndex) {
        this.$notice.toast({
          message: '选中了' + index
        })
      } else {
        this.$notice.toast({
          message: '未选中' + index
        })
      }
    }
  }
}
</script>
<style scoped>
.item {
  padding: 20px;
}
.cell {
  border-bottom-width: 1px;
  border-bottom-color: #c0c0c0;
  height: 100px;
  align-items: center;
  flex-direction: row;
}
</style>

样式二：

• 因为weex-ui里面的wxc-radio组件在使用时，选中之后，被选中的cell会一跳一跳的，体验极为难受，所以就考虑自己实现，点击cell时，会在cell右侧显示选中按钮图标。

  
  

<template>
    <div>
        <list>
            <cell v-for="(item,index) in listData" @click="onRadio(index)">
                <div class="cell">
                    <text class="item">{{item.text}}</text>
                    <image v-if="radio && index === currentIndex" class="img" src="http://mpic.tiankong.com/0f9/180/0f91804112179eaf460b0f5980b9674c/640.jpg@!670w"></image>
                </div>
            </cell>
        </list>
    </div>
</template>
<script>
export default {
  data: {
    radio: false,
    currentIndex: 0,
    listData: [
      { text: '开发者头条' },
      { text: 'Android开发艺术探索' },
      { text: 'Google' },
      { text: '梅长苏' },
      { text: '马刺总冠军' }
    ]
  },
  methods: {
    onRadio(index) {
      if (this.currentIndex !== index && this.radio === true) {
        this.currentIndex = index
        this.radio = true
      } else {
        this.currentIndex = index
        this.radio = !this.radio
      }
        this.$set(this.listData, index, this.listData[index])
      if (this.radio && index === this.currentIndex) {
        this.$notice.toast({
          message: '选中了' + index
        })
      } else {
        this.$notice.toast({
          message: '未选中' + index
        })
      }
    }
  }
}
</script>
<style scoped>
.item {
  padding: 20px;
}
.cell {
  border-bottom-width: 1px;
  border-bottom-color: #c0c0c0;
  background-color: #ffffff;
  height: 100px;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.img {
  margin-right: 25px;
  width: 45px;
  height: 45px;
}
</style>

样式三：

• 横向排列，单选按钮。

<template>
    <div>
        <list>
            <cell class="wrapper">
                <div @click="clickCButton(index)" class="radioButton" v-for="(rb,index) in radioButtons" :key="index" v-bind:style="{'background-color':((index === currentIndex)?'#E21918':'#ffffff'),'border-color':(( index === currentIndex)?'#E21918':'#8e8e93')}">
                    <text class="radioText" v-bind:style="{'color':((index === currentIndex)?'#ffffff':'#000000')}">{{rb.title}}</text>
                </div>
            </cell>
        </list>
    </div>
</template>
<script>
export default {
  data() {
    return {
      currentIndex: 0,
      radioButtons: [
        { title: '格斗' },
        { title: '拳击' },
        { title: '篮球' },
        { title: '足球' },
        { title: '冰球' },
        { title: '摔跤' }
      ]
    }
  },
  methods: {
    clickCButton(index) {
      if (this.currentIndex !== index) {
        this.currentIndex = index
      } else {
        this.currentIndex = index
      }
      this.$set(this.radioButtons, index, this.radioButtons[index])
      if (index === this.currentIndex) {
        this.$notice.toast({
          message: '选中了' + index
        })
      } else {
        this.$notice.toast({
          message: '未选中' + index
        })
      }
    }
  }
}
</script>

<style scoped>
.wrapper {
  flex-direction: row;
  align-items: center;
  height: 80px;
  padding-left: 22px;
  border-bottom-width: 1px;
  background-color: white;
  border-bottom-color: rgb(240, 240, 240);
}
.radioButton {
  border-radius: 5px;
  width: 100px;
  height: 60px;
  border-width: 1px;
  margin-left: 10px;
  justify-content: center;
  align-items: center;
}
.radioText {
  font-size: 25px;
}
</style>