仿小米商城-选择商品功能-出现对号

来源：互联网发布：长沙哪里有学美工的编辑：程序博客网时间：2024/05/08 17:07

效果如图：

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>

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

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

阅读全文

0 0