购物车合计

单价:500

数量:2

合集:0

实现原理

通过文本内容绑定单价和数量,以及总价的变量,使用批量逻辑定义的复合数据来定义其关系来实现单价*数量

涉及知识点: 数据绑定 数组绑定 复选框绑定 逻辑 定义复合数据 

涉及模板

功能实现所涉及到的代码模板,代码模板的使用请查看这里

1. 额外逻辑:

使用位置: 元素右键-->逻辑-->额外逻辑编程

作用: 用于给某元素在某条件下添加逻辑行为。

内容:

var varall = _vm["复合信息名称"]();
var varname = "绑定变量名称";
var arrname = "数组变量名称";
if (!varall) {
        for (var i = 0; i < _vm[arrname]().length; i++) {
          _vm[arrname]()[i][varname]("绑定变量值");
        }
} else {
        for (var i = 0; i < _vm[arrname]().length; i++) {
          _vm[arrname]()[i][varname]("绑定变量值");
        }
}

 

2. 复合信息:

使用位置: 页面编辑-->编辑-->逻辑文件-->复合信息

作用: 用于定义通过计算得出的数据。

内容:

"复合信息名称": function() {
  var _vm = this;
  var result; //最终的返回数据,需要定义初始值。例如数据返回的是真假,可以写为:var result = true;
  var varname1 = "绑定变量名称";
  var varname2 = "绑定变量名称";
  var varname3 = "绑定变量名称";
  var arrname = "数组变量名称";
  for (var i = 0; i < _vm[arrname]().length; i++) {
    if (_vm[arrname]()[i][varname1]()) {
      result += _vm[arrname]()[i][varname2]() * _vm[arrname]()[i][varname3]();
    }
  }
  return result;
}, //一个复合信息点结束

 

Step by Step

购物车价格合计

 

上面的效果演示的实现使用了两个案例内容,一个是多选框全选,一个是价格合计。

 

实现步骤

1. 制作购物车中的一个商品(包括左侧勾选框及价格,数量。)

1.1 左侧勾选框

文档流布局中添加一个“复选框”,内容不用管,确定添加。

 

右键单击复选框(图1),逻辑→逻辑,设置`单击元素发生的事件`(图2),请注意,要将逻辑绑定在input标签上而不是label标签上

图1:

图2:

发生的事件,通过`绑定数据编程`实现。绑定数据编程的代码模板可点击这里查看

完成后保存,添加绑定。

逻辑→数据绑定: 绑定模式:多选框勾选状态绑定,绑定参数:checkall

1.2 商品价格

回车下一行,录入"单价:xxx",右键单击xxx>>逻辑>>数据绑定。文本内容绑定,绑定参数:danjia

回车下一行,录入"数量:2",右键单击2>>逻辑>>数据绑定。文本内容绑定,绑定参数:shuliang

 

1.3  为商品绑定初始化数据

回车下一行,打开元素模式。添加一个div。

右键单击添加的div(这个div是包在商品外面的)。逻辑→数据绑定。设置参数如下。

高级编辑:

内容如下:

{"arr":[{"check":true,"danjia":100,"shuliang":2},{"check":true,"danjia":200,"shuliang":2},{"check":true,"danjia":100,"shuliang":3},{"check":true,"danjia":500,"shuliang":1}]}

2. 制作全选按钮

在刚才我们新建的div中添加一个复选框,参数不用管,确定添加。右键单击复选框。逻辑→数据绑定(在input上添加),设置参数如下:

3.价格合计

回车下一行,录入"总价:xxx",右键单击xxx>>逻辑>>数据绑定。文本内容绑定,绑定参数:total

4. 设置 批量逻辑编辑添加复合数据定义

设置完后保存。找到编辑>>逻辑文件

设置复合信息。复合信息的代码模板可点击这里查看

注意事项

在这里添加注意事项描述