微信小程序的开发之二级购物单选、全选功能

标签: 微信小程序  二级购物单选、多选

所谓的二级购物选择,先分为二级购物和选择。二级购物即为连个循环列表的套用
wxml
<checkbox-group>
    <label class="checkbox" wx:for-items="{{items}}" data-value='{{item.name}}' bindtap="checkboxChange">
        <text class="{{item.checked == true?'is_checked':''}}"></text>
        <checkbox value="{{item.name}}" checked="{{item.checked == true}}" color='{{color}}' hidden='true'/>{{item.value}}
        <view class='fr' catchtap='dowmUp' data-value='{{item.name}}'>
          <image src='../../images/down.png' hidden='{{item.isClick}}'></image>
          <image class='up' src='../../images/down.png' hidden='{{!item.isClick}}'></image>
        </view>

        <checkbox-group  hidden='{{!item.isClick}}' >
          <label class="checkbox" wx:for="{{item.list}}" wx:for-item='list' data-value='{{list.name}}' catchtap='childChange' data-id='{{item.name}}'>
                <text class="{{list.checked == true?'is_checked':''}}"></text>
                <checkbox value="{{list.name}}" checked="{{list.checked == true}}" color='{{color}}' hidden='true'/>{{list.value}}
                <view class='fr' catchtap='dowmUp'><text>{{list.price}}</text>
                </view>
            </label>
        </checkbox-group>

    </label>
</checkbox-group>
wxss
checkbox-group>label {
  padding-left: 80rpx;
  display: block;
  /* height: 96rpx; */
  line-height: 96rpx;
  margin-bottom: 10rpx;
  background-color: #fff;
  color: #333;
  font-size: 32rpx;
  position: relative;
}

checkbox-group>label>text {
  width: 30rpx;
  height: 30rpx;
  border: 2rpx solid #c2c2c2;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
  left: 30rpx;
  top: 33rpx;
}

label text.is_checked {
  background-color: #C71B1B;

}

checkbox-group>label>.fr {
  display: inline-block;
  padding: 42rpx 31rpx;
  width: 22rpx;
  height: 12rpx;
}

image {
  width: 100%;
  height: 100%;
  display: block
}

checkbox-group>label>.fr>image.up {
  transform: rotate(180deg)
}

checkbox-group checkbox-group {
  border-top: 1px solid #f0f0f0;
  margin-left: -50rpx;
}

checkbox-group checkbox-group>label  {
  padding-left: 50rpx;
}

checkbox-group checkbox-group>label>text {
  left: 0
}

checkbox-group checkbox-group>label .fr {
  padding: 0 31rpx;
  width: auto;
  height: auto;
  font-size: 18rpx;
  color: #C71B1B;
}

checkbox-group checkbox-group>label .fr text {
  font-size: 28rpx;
}
js
/**
   * 页面的初始数据
   */
  data: {
    items: [

    ]
  },

  /**
   * 一级选择
   */
  checkboxChange: function (e) {
    var items = this.data.items;
    var checkArr = e.currentTarget.dataset.value;
    items[checkArr].checked = !items[checkArr].checked;
    if (items[checkArr].checked == true) {
      // 二级样式随之变化
      for (var j = 0; j < items[checkArr].list.length; j++) {
        items[checkArr].list[j].checked = true;
        total += parseFloat(items[checkArr].list[j].price);
      }
    }else {
      for (var j = 0; j < items[checkArr].list.length; j++) {
        items[checkArr].list[j].checked = false;
        total -= parseFloat(items[checkArr].list[j].price);
      }
    }
    this.setData({
      items: items,
      total: total
    }) 
  },

  /**
   * 二级选择
   */
  childChange: function (e) {
    var items = this.data.items;
    var checkArr = e.currentTarget.dataset.value;
    var id = e.currentTarget.dataset.id;
    items[id].list[checkArr].checked = !items[id].list[checkArr].checked;
    if (items[id].list[checkArr].checked == false) {
      items[id].checked = false;
      total -= parseFloat(items[id].list[checkArr].price);
    }else {
      total += parseFloat(items[id].list[checkArr].price);
    }
    this.setData({
      items: items,
      total: total
    }) 
  },

  /**
   * 二级显示
   */
  dowmUp: function (e) {
    var items = this.data.items;
    var items = this.data.items;
    var checkArr = e.currentTarget.dataset.value;
    items[checkArr].isClick = !items[checkArr].isClick;
    this.setData({
      items: items
    }) 
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.request({
      url: '',
      data: {

      },
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      method: 'POST',
      dataType: 'json',
      success: function (res) {
        // 初始化获取分享列表

      },
      fail: function (res) { },
      complete: function (res) { },
    })
  }
效果图

这里写图片描述

版权声明:本文为m0_37852904原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_37852904/article/details/80701970

智能推荐

Rtthread学习笔记(十三)RT-Thread Studio开启硬件看门狗Watchdog

一、开启硬件看门狗Watchdog 1、配置RT-Thread Settings 2、开启stm32f1xx_hal_conf.h中的宏定义 3.使用RT接口函数初始化硬件看门狗...

TYVJ 4864 天天去哪吃 || 清北学堂金秋杯大奖赛

题目描述: 记录一下i这个值上次出现的位置在哪里,就是pre...

java反编译

jvm 把Boolean类型的值flag当做int类型处理。​​​ Foo.java: 由 class 文件生成 jasm 文件:java -jar asmtools.jar jdis Foo.class > Foo.jasm  修改jasm文件: 执行反编译: java -jar jd-gui-1.6.6.jar File 打开Foo.class文件:b修改为2 重新执行java...

【学习笔记】03-v-html的学习和示例

v-html的认识和使用 示例: 显示结果: 注意:v-html是有复制的...

Java实现在线考试系统(系统介绍)

1.和现在有的考试系统有以下几种优势: a.和现在有的系统比较起来,本系统有科目、章节、老师、学生、班级等信息的管理,还有批阅试卷查看已批阅试卷等。传统的考试系统划分并不细,业务功能简单。 b.和学校的考试系统还有外面的考试系统比较起来,本系统是B/S结构,学校的考试系统一般为C/S结构,性能方面不如B/S结构,并且C/S接口需要安装客户端,客户端压力很大,我的系统只需要电脑具有浏览器,在同一局域...

猜你喜欢

计算机视觉--多视几何初步尝试

基础矩阵的原理 K和K’分别是两个相机的参数矩阵。p和p’是X在平面π的坐标表示。所以可以得出 具体计算过程 代码: #!/usr/bin/env python coding: utf-8 from PIL import Image from numpy import * from pylab import * import numpy as np from imp ...

java初学者怎么学习才可以快速入门

java初学者怎么学习才可以快速入门 一、了解JAVA 我们要知道:Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言。 Java之父:詹姆斯·高斯林 1.1 java的三个体系 Java SE(Java Platform Standard Edition)。Java SE 以前称为 J2SE。它允许开发和部署在桌面、服务器、嵌入式环境...

字段属性之主键&增删改查&自增长&唯一键约束

字段属性之主键&自增长&唯一键约束 主键 主键:primary key 主要的键 一张表中只有一个字段可以使用对应的键,用来唯一的约束该字段里面的数据,不能重复,这种称之为主键 一张表只能最多一个主键 增加主键 SQL操作中有多种方式增加主键大体分为三种 1.在创建表的时候直接在字段之后跟primary key关键字(主键本身不允许为空) 优点:非常直接:缺点:只能使用一个字段作为...

linux下 基于libmad的socket多用户mp3音频在线播放服务器

在众多大神的帮助下,这个在线播放流媒体服务器终于完成啦。。。。 这个mp3流媒体服务器设计的思路是,服务器程序server用多线程实现和多个客户端的通信(这是必然的),然后发送给客户端当前的音频列表公客户端选择,之后根据k客户端的选择给多个客户端传输相应mp3文件的数据,同时,客户端进行实时地音频解码并播放。 关于libmad开源mp3音频解码库的使用,见上一篇博客吧。。。。 在服务器程序这一端,...

Nginx

Nginx Nginx简介: Nginx是一个高性能的http和反向代理服务器,特点是有内存少,并发能力强,事实上Nginx的并发能力确实在同类型网页服务器中表现较好, Nginx用作web服务器:Nginx可以作为静态页面的web服务器,同时还支持CGI语言,但不支持java,java程序只能通过Tomcat配合完成。Nginx专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率,能经受...