微信小程序--单选按钮以及多选按钮列表

最新推荐文章于 2024-04-20 16:42:51 发布

小小黑007

最新推荐文章于 2024-04-20 16:42:51 发布

阅读量3.1k

点赞数

分类专栏：微信小程序文章标签：微信小程序 javascript 小程序

本文链接：https://blog.csdn.net/heavenz19/article/details/126428689

版权

微信小程序专栏收录该内容

42 篇文章 7 订阅

订阅专栏

微信小程序–单选按钮以及多选按钮列表

html

<view wx:if="{{listInfo.length>0 && tag !=1}}" class="marB20 paddL30 paddB30 paddT30 paddR30 boxSing wid95 bgfff marL20 marR20 boRadius10 flexz marT20 " wx:for="{{listInfo}}" wx:key="index">
  <view class="wid90 fontz28 marT10">
    {{item.itemName}} <text class="fontWeightB colorCF2B36 paddL20">￥{{item.price}}</text>
  </view>
  <view class="img40 marT10 marL20">
    <image class="imgz" src="{{item.isCheck?'/images/yuan2.png':'/images/yuan1.png'}}" data-presno="{{item.presNo}}" data-itemcode="{{item.itemCode}}" data-itemname="{{item.itemName}}" data-price="{{item.price}}" bindtap="choseBtn"></image>
  </view>
  <view></view>
</view>

js页面

//获取选中的数据
  getChose() {
    let v = this.data;
    let inspectInfo = v.inspectInfo, listInfo = v.listInfo;
    listInfo.filter((item) => {
      inspectInfo.forEach(its => {
        if (its.itemCode == item.itemCode) {
          item.isCheck = true;
        }
      })
    })
    this.setData({
      listInfo,
      choseList: inspectInfo
    })
  },
  
// 多选
  choseBtn: untils.throttle(function (e) {
    let v = e.currentTarget.dataset, itemCode = v.itemcode,presNo = v.presno,t = this.data, listInfo = t.listInfo;
    let choseList = t.choseList, choseArr = t.choseArr;

    let abj = { //转变成对象
      itemCode: itemCode,
      itemName: v.itemname,
      price: v.price,
      presNo:presNo
    };

    listInfo.forEach((item, i) => {
      if (itemCode == item.itemCode) {
        item.isCheck = !item.isCheck
        if (item.isCheck) { //选中后 true添加数据
          choseList = choseList.concat(abj);
        } else { //取消后 删除数据
          choseList.splice(listInfo.indexOf(item.itemCode), 1)
        }

      }
    });


    this.setData({
      listInfo: listInfo,
      choseArr,
      choseList
    })
  }),

在这里插入图片描述
单选

// 选中挂号时间
  choseBtn(e) {
    let v = e.currentTarget.dataset, sourceId = v.sourceid, t = this.data, listInfo = t.listInfo,availableSourceNum=v.avanum;
    listInfo.forEach((item, i) => {
      if (item.sourceId == sourceId) {
        if (item.isCheck) return item.isCheck = false, this.setData({ sourceId: '',dataTime:''})
        item.isCheck = true; 
        this.setData({
          sourceId: item.sourceId,
          dataTime:item.star +'-'+item.end
        })
      } else {
        item.isCheck = false
      }
    });
    this.setData({
      listInfo: listInfo,
      availableSourceNum:availableSourceNum
    })
  },