微信小程序-template使用：实现购物车商品数量加减功能

IT实战联盟博客：http://blog.100boot.cn

前言

上一篇我们实现了购物车功能，里面有用到template模板功能来实现购物车商品数量加减和价格计算功能，可能篇幅过长介绍的并不清楚，本篇将详细介绍一下template模板来减少冗余代码。

模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：

template.wxml

<template name="quantity"><!-- 主容器 -->  <view class="stepper">  <!-- 减号 -->  <text class="{{count <= 1 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{{index}}">-</text>  <!-- 数值 -->  <input type="number" bindchange="bindManual" value="{{count}}"  disabled="disabled"/>  <!-- 加号 -->  <text class="{{count >= 10 ? 'disabled' : 'normal'}}" bindtap="addCount" data-index="{{index}}">+</text>  </view>  </template>

template.wxss

/*主容器*/  .stepper {  width:90px;  height: 26px;  /*给主容器设一个边框*/  border: 1rpx solid #000000;  border-radius: 3px;  margin:0 auto;
}  /*加号和减号*/  .stepper text {  width: 24px;  line-height: 26px;  text-align: center;  float: left;
}  /*数值*/  .stepper input {  width: 40px;  height: 26px;  float: left;  margin: 0 auto;   text-align: center;  font-size: 12px;  color: #000000;    /*给中间的input设置左右边框即可*/  border-left: 1rpx solid #000000;  border-right: 1rpx solid #000000;
}  /*普通样式*/  .stepper .normal{  color: black;
}  /*禁用样式*/  .stepper .disabled{  color: #ccc;
}

使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

test.wxml

<import src="../template/template.wxml" /><view wx:for="{{items}}"><view class="temp-view"><template is="quantity" data="{{ ...item,index:index}}" /></view> </view>

test.js

#初始化数据
data: {
    items: [{id: 1,isSelect: false,// 数据设定count: 2},{        id: 2,isSelect: true,// 数据设定count: 1},{        id: 3,isSelect: true,// 数据设定count: 1}]},

/* 加数 */addCount: function (e) {
    var index = e.target.dataset.index;
    console.log("刚刚您点击了加+");
    var count = this.data.items[index].count;    // 商品总数量+1  if (count < 10) {
        this.data.items[index].count++;}
    // 将数值与状态写回  this.setData({      items: this.data.items});
    console.log("items:" + this.data.items);},

 /* 减数 */delCount: function (e) {    var index = e.target.dataset.index;    console.log("刚刚您点击了加一");    var count = this.data.items[index].count;    // 商品总数量-1if (count > 1) {      this.data.items[index].count--;}    // 将数值与状态写回  this.setData({      items: this.data.items});    console.log("items:" + this.data.items);},

模板作用域

模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。

更多精彩内容

微信小程序电商实战-入门篇

微信小程序电商实战-首页（上）

微信小程序电商实战-首页（下）

微信小程序电商实战-商品详情（上）

微信小程序电商实战-商品详情加入购物车（下）

微信小程序电商实战-商品列表流式布局

微信小程序实战篇：基于wxcharts.js绘制移动报表

小程序实战-幸运大转盘

微信小程序-Image的widthFix属性和rpm尺寸的使用

微信小程序实战篇：小程序之页面数据传递

微信小程序实战篇：实现抖音评论效果

微信小程序电商实战-购物车（上）

微信小程序电商实战-购物车（下）

微信小程序抖音实战-首页（上）

IT实战联盟博客：http://blog.100boot.cn

关注我们

如果需要源码可以关注“IT实战联盟”公*众*号并留言（源码名称+邮箱），小萌看到后会联系作者发送到邮箱，也可以加入交流群和作者互撩哦~~~

微信小程序-template使用：实现购物车商品数量加减功能相关推荐

android商品数量加减,微信小程序实现一个简单的商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...
php购物车数量加减代码,js实现购物车商品数量加减
本文实例为大家分享了js实现购物车商品数量加减的具体代码,供大家参考,具体内容如下 Html - + CSS .list a { display: block; margin: 30px; paddi ...
SpringBoot-项目4-购物车(添加入购物车，购物车列表，购物车商品数量加减操作)
64. 购物车-创建数据表 # 注意:没有添加相应的not null约束 CREATE TABLE t_cart (cid INT AUTO_INCREMENT COMMENT '购物车数据id',u ...
jQuery购物车商品数量加减和小计
整体代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
php购物车数量加减代码,购物车商品数量加减效果
Insert title here $(function(){ $(".add").on("click", function(){ // 先找到当前加号的父元素 ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
微信小程序：block制作动态商品列表
微信小程序:block制作动态商品列表在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表. 运行截图实现代码 js: P ...
微信小程序怎么上架和发布商品？
小程序商城商品上架与发布是很重要的一步操作.那么微信小程序怎么上架和发布商品? 第一步:登录来客电商后台第二步:依次点击商品管理--商品列表--发布商品第三步:完善商品信息注意事项: 商品详细介 ...
微信小程序菜品做法展示数据库设计_微信小程序结合后台数据管理实现商品数据的动态展示、维护...
微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示.维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通 ...
微信小程序仿京东淘宝商品排序
微信小程序仿京东淘宝商品排序效果图如下所示仿京东微信小程序视频请加QQ:1010753897 下载地址:https://download.csdn.net/download/qq_43764578 ...

微信小程序-template使用：实现购物车商品数量加减功能

微信小程序-template使用：实现购物车商品数量加减功能相关推荐

最新文章

热门文章