微信小程序-仿小米商城-选择商品功能-出现对号

效果如图：

wxml

<view class="phone" data-num="1" bindtap="select">
  <view class="_phone">
  <text>小米Noto 2 4GB+64GB 亮黑色</text>
  <image src="../../assets/images/yes.png" class="{{right==1?'yes':'no'}}"></image>
  <text class="price">699元</text>
  </view>  
</view>

<view class="phone" data-num="2" bindtap="select">
  <view class="_phone">
  <text>小米Noto 2 4GB+64GB 亮黑色</text>
  <image src="../../assets/images/yes.png" class="{{right==2?'yes':'no'}}"></image>
  <text  class="price">699元</text>
  </view>  
</view>

<view class="phone" data-num="3" bindtap="select">
  <view class="_phone">
  <text>小米Noto 2 4GB+64GB 亮黑色</text>
  <image src="../../assets/images/yes.png" class="{{right==3?'yes':'no'}}"></image>
  <text  class="price">699元</text>
  </view>  
</view>

js

const App = getApp()

Page({
    data: {
        array: ['1', '2', '3', '4','5'],      
        index: 0 ,
        right: 0     
    },
    bindPickerChange1: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
            index: e.detail.value
        })
    },
    select: function (e) {  
      console.log(e.currentTarget.dataset.num) 
      this.setData({
        right: e.currentTarget.dataset.num       
      })
    }
})

wxss

.price{
  float:right;
  color:#f19;
}
._phone{
  border-top:1px solid #f7f7f7;
}
view:nth-of-type(2) ._phone{
  border:0;
}
._phone image{
  float: right;
  width:12px;
  height:12px;
  padding:5px 0 0 10px;
}
.yes{visibility:visible;}
.no{visibility: hidden;}

友情提示：图片自己随便找，以上是完整代码