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

效果如图:

选择

wxml


  
  小米Noto 2 4GB+64GB 亮黑色
  
  699元
    



  
  小米Noto 2 4GB+64GB 亮黑色
  
  699元
    



  
  小米Noto 2 4GB+64GB 亮黑色
  
  699元
    

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;}

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

你可能感兴趣的:(微信小程序,tab选择)