太阳集团2018登录网址[主頁]欢迎您!

您好,
Are you ready

准备好开始了吗,
那就与我们取得联系吧

您希望我们为您提供什么服务呢

· · · ·

· · ·

您的预算
微信小程序,购物车功能开发,通过radio组件实现全选,单选功能实现
发表人:太阳集团2018登录网址 | 2022-04-16

在微信小程序开发购物车功能时,全选,单选是基本需要的功能,一般有的作者喜欢用radio组件实现,有的喜欢用checkbox组件实现,本篇文章讲解的是radio组件的实现原理及代码,好,马上进入正题。

radio组件全选按钮功能实现

image.png

上图中商品列表的左边radio组件就是全选按钮,实现思路是:当所有子项都选中时,显示选中状态,否则为不选中状态。未选中状态时点击操作,把所有子项都所中。选中状态点击操作,把所有子项都不选中。

逻辑讲完上简化后主要逻辑代码:

先是wxml:

<radio value="0checked="{{allchecked}}" bindtap="selectAllcolor="#d81e06" />商品列表

<view class="car-listwx:for="{{car_list}}" wx:key="indexwx:for-item="item">

<radio checked="{{item.selected}}" bindtap="selectListdata-index="{{index}}color="#d81e06" />{{item.title}}

view>

allchecked是控制全选的选中状态的变量,selectAll是全选的点击事件,selectlist是子项点击事件。

再是js代码:

data: {

    car_list: [],

    allchecked: false,

},

// 全选事件

  selectAll(e) {

    // 是否全选状态

    var selectAllStatus = this.data.allchecked;

    selectAllStatus = !selectAllStatus;

    var dataList = this.data.car_list;

    for (let i = 0; i < dataList .length; i++{

      // 改变所有商品状态

      dataList [i].selected = selectAllStatus;

    }

    this.setData({

      allchecked: selectAllStatus,

      car_list: dataList,

    });

  },

// 选择事件

  selectList(e) {

    // 获取data- 传进来的index

    let index = e.currentTarget.dataset.index;

    // 获取购物车列表

    let dataArr = this.data.car_list;

    // 获取当前商品的选中状态

    let selected = dataArr[index].selected;

    // 改变状态

    dataArr[index].selected = !selected;

    this.setData({

      car_list: dataArr

    });


    // 改变全选状态

    for (var i = 0; i < this.data.car_list.length; i++{

      // 当状态为全选时,每个元素其中有一个为false,则取消全选

      // 当状态为非全选时,每个元素都为true,则全选

      if (this.data.allchecked{

        if (!this.data.car_list[i].selected{

          this.setData({

            allchecked: false

          });

          break;

        }

      } else {

        if (this.data.car_list[i].selected{

          this.setData({

            allchecked: true

          });

        } else {

          this.setData({

            allchecked: false

          });

          break;

        }

      }

    }

  },

通过以上代码就能实现微信小程序radio组件的全选,单选功能实现,其中car_list是从服务器加载商品列表,这里如何获取数据就不在本篇讲解了。


—— 太阳集团2018登录网址公众号 ——
十二年 行业积累

砥砺前行路上,有您关注,相聚相研共话成长!

如有意向,请与我们联系

办公电话:0774-3838278 / QQ:154727262 / 微信:wztmma