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

逃离Java 2018-05-23 15:13:35 ⋅ 141 阅读


前言

上一篇我们实现了购物车功能,里面有用到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;    // 商品总数量-1    if (count > 1) {      
        this.data.items[index].count--;    }    
   // 将数值与状态写回      this.setData({      
       items: this.data.items    });    
   console.log("items:" + this.data.items);  },

模板作用域

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

更多精彩内容

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

微信小程序电商实战-首页(上)

微信小程序电商实战-首页(下)

微信小程序电商实战-商品详情(上)

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

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

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

小程序实战-幸运大转盘

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

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

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

微信小程序电商实战-购物车(上)

微信小程序电商实战-购物车(下)

微信小程序抖音实战-首页(上)


关注我们

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


全部评论: 0

    我有话说:

    程序实现商品数量

    这是一个用程序原生代码实现数量demo,主要是用于商品购物或者商品详情修改数量使用

    程序电商实战-购物(下)

    我们继续接着昨天的购物写,主要把剩下的数量 template 模板、选中计算功能实现掉!

    程序商城(八):缓存实现商品购物功能

    商品详情页将商品信息放入缓存,购物页面读取缓存获取商品信息,购物商品计算和删除缓存商品

    程序电商实战-商品详情加入购物(下)

    今天会接着上一篇开始写商品详情页加入购物的部分,直接看效果......

    程序商城(五):动态API实现商品详情页(下)

    加入购物悬浮框、商品数量、价格计算、收藏和加入购物功能开发

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据

    程序电商实战-购物(上)

    好久没更新程序电商实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 程序电商教程推出.......

    程序商城(四):动态API实现商品详情页(上)

    1、实现商品详情页面布局(这篇实现3个模块,头部商品图片轮播、商品价格和商品描述、商品详情展示) 2、根据用户点击不同的商品请求API动态数据

    程序电商实战-商品详情(上)

    先看一下今天要实现程序商品详情页吧!

    程序商城(一):https框架搭建并实现导航功能

    本文将带领大家搭建https的程序框架,并实现动态获取数据展示效果!

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

    在做程序商品详情页,商品的详情是图片集合,渲染完成后发现图片载的很不自然

    程序实战篇:商品属性联动选择(案例)

    本期的程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序商城(六):动态API实现新品特卖商品流式布局

    实现新品特卖商品列表布局、调用动态API获取数据载和点击商品跳转商品详情

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

    今天给大家分享一下程序商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序商城(九):授权并实现个人中心页面页面

    实现商城授权并获取用户信息和个人中心页面布局

    程序抖音实战-首页(上)

    你也可以用程序编写一个抖音

    程序电商实战-首页(下)

    上一篇:程序电商实战-首页(上)好了,上一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序电商实战-首页(上)

    上一篇:程序电商实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图