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

素颜马尾好姑娘i 2022-05-24 07:53 650阅读 0赞

![6d50f13e89be234df6d84b9530415e7a.gif][]

IT实战联盟博客：[http://blog.100boot.cn][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

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 /> 模块。

更多精彩内容

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

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

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

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

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

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

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

[小程序实战-幸运大转盘][- 6]

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

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

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

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

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

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

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

关注我们

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

[6d50f13e89be234df6d84b9530415e7a.gif]: /images/20220524/85297966541b4ad4a8c290106d72f8f4.png
[http_blog.100boot.cn]: http://blog.100boot.cn/
[-]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483670&idx=1&sn=b9d5aba9a9fbc554c73e75fb96baa9c7&chksm=fc4df357cb3a7a41c1dad9b3958559b94ede901977f75bd190c1a31f80521e63762f1c9a0c29&mpshare=1&scene=21&srcid=0328MjVPuaFzLYNUztIrcguF&key=e2f055305b351fc9ec2e28f5b88e7fa86659825200c89a0f765bab65bfc1b99b6608508ca4167aa552d84c30f8f7b5d5874d293059e263a1c5d648019d3032d0047fe8ee8ff5ac9695166e3ff6fdd544&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 1]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483739&idx=1&sn=513983eb9498045fc9596718a346ca89&chksm=fc4df31acb3a7a0ce587d2a1efb5843141db9c0a3cef517cadadeb8ddc7ee87965c68a3f92bb&mpshare=1&scene=21&srcid=0328zMOVse9XdMVg5bIcVC7I&key=e2f055305b351fc97b608d5c03843c1805b3ec5a4e7a2c52dcb8c09c4b25728a6c90eeb5b2f3a76f274c4ffe56a31dcbec0b88ee48a301dee3c28ba47308909905cc4ce2ed141fd1fd1c7aaec6674c19&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 2]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483758&idx=1&sn=dff49ea53dbd16a7f4e4b6ae6d6e0632&chksm=fc4df32fcb3a7a39194f81a9b02a75ce4085027aaf0c4cb928bd51356cb9f573d21626e288de&mpshare=1&scene=21&srcid=03286fHG8MV00HQsP1HjM7LA&key=505f8e205eea7c2154a32806e67b807ac24b0cfb6521db9cb828a4ebcc5a5a0d19beed72d12a3ed2d1ee1fb3b840e8d347cccb3cf93aedcac94185ccc0c525c2f5e6faa1f0140cdd8ef4114f3f3c567b&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 3]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483874&idx=1&sn=dba01d63f4a262c07e110d4e40abdde5&chksm=fc4df3a3cb3a7ab57c85f171095d737a2db974f56aaec6d639b84b5d767cef94248787b7b6d6&mpshare=1&scene=21&srcid=0328p7C4mIHTp22VumVmpUzQ&key=505f8e205eea7c21ade5b4fae43d72fd7a1f64d0ffd73c9080bb5265c25d606f36f3b23a85715fe0f5406780fea08718819d0d98e75f496b26deefb258d64bf0d76007f690261d93949eeb650865c4be&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 4]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484276&idx=1&sn=1d5c3e166a2fefd5fb596d24093958d8&chksm=fc4df135cb3a782353a65dde4072c5de4303837577b2827f49bbed8132137894bcc232e37676&mpshare=1&scene=21&srcid=0413r4WFE7Ga0QI33lNxAaBi&key=a26753775bc5a4cc558446a192cedd125fd028a45003c73653de57832e94af26dab25d0c1806fb8ed6151ebd112955de29d204c64f99aba90d5e454cad5bc962ffb0f7ff3aedba819ccf27f03e9b0281&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=OCUECpDe3wAhOPu6kW2De6oWGQgsS1QZ6xXWbN1sKPRcagqnfallu65Uq1v2MsNC#wechat_redirect
[- 5]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484027&idx=1&sn=54a372e6d890b2aadb74a7f6be8e31c0&chksm=fc4df03acb3a792c80423d9b5fc9a39d35927e79f017b05567ba42c75b993d008afa4d8eea78&mpshare=1&scene=21&srcid=0328djLj7vwBSxj8WUuatQaC&key=505f8e205eea7c2128284fd633112e66febce70ade0fb9efc4f602257d413b81a908a95d1a6b529b54918902eb6e0aeda4a5f5e1deb13daf0e172cbaf6beea575e9d93369835b10ebf8f3e397dcd062c&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[wxcharts.js]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484175&idx=1&sn=7afedd9892b5e29b824aaf82a4986309&chksm=fc4df14ecb3a7858707302bc5c764757d85a5e10bd6ab84cd14e55f85410fa677ccd5cbf11b2&mpshare=1&scene=21&srcid=0328fFYTH687PfpQT9Fx5Fzk&key=50484b766617eb01ead846871bd8e696bea4f61708f1f3b9c2fa723c6db2e95fc9e7034d01d2295bdae5beef06b11d561abb39bb3e2f418bb94818b355eba5e886fa5d06ef0f03bbcd357db4d6f5603f&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[- 6]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247483907&idx=1&sn=15750f0ad2c43e1f39d278ccb574e69c&chksm=fc4df042cb3a79549912c1acf1946f27e6e2df4e1565209e1f5bd001b2ef4f43ab56a3332a0e&mpshare=1&scene=21&srcid=0409F13sZCHWhMxxsVNadA0p&key=505f8e205eea7c2106f70fb32919a74a1a81257aed4fe1be8ca8d8e0c571687b8239ff82e3d8e809a487c2cf2a5cd0db57b4ea11a418e69fd0bb357c2349951cd6fca03cf100fe1614139e1103e6395c&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=xATsQx4T2CygyoAw3rXIOQfLMbuSjLl2m235IRGEzZmoXSjKXv6ZYiRkmp2qYN%20o#wechat_redirect
[-Image_widthFix_rpm]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484050&idx=1&sn=cb47932cb4e5c7e76ecb0a06bf980a41&chksm=fc4df0d3cb3a79c544d4b5de4158f172a8ed40a4d88ccd7cd3051f4ed8b2998c60a6dd983491&mpshare=1&scene=21&srcid=0328rKhgcKBHBzwZSQXgdCyO&key=c9369063c8731b82cc93062840543ae058ea2760d12f0cd19e26accf017f3017d9fce9313a3cbd08aa3bef766ad57d45d840f4e23e25550e418fe8b73c30683200045a3597c1c164168e7aa2f0013693&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BxVlfaY4HtmB6/M34adaIdqutJnyd2TkM8SbfyPU2Ia94z6w%2010IUTzDFzQp//1X#wechat_redirect
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484297&idx=1&sn=f4058b62cd422eddb986960c51d98dca&chksm=fc4df1c8cb3a78deaac6d58d0434e9a70fae027647793802f5a78d2238843351fc5ea955d02a&mpshare=1&scene=21&srcid=0503y4ZkeSJaTiSj77WnZg1M&key=b67b626bde1fc6dee989bd97dda04724b4ac5e4cfd4a5916465ff5950fe4bea3d1ad6f00eea5bdd8f859a37c1c0dff78b751d6845a56a15de72168bae1384e40933c99d6e5a5b922470fa6d53e63ac70&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=BBwAoQ210abmQls8Q0LgORJO9tAuXmpSkXF5uTnOdLhGkHmTND2c0AwSQEg5ZwDg#wechat_redirect
[Link 2]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484389&idx=1&sn=a752172ac1296b0ce8da697378fc7a62&chksm=fc4df1a4cb3a78b2bdd06253e7d90194d4afe87c7038a2daeffaa3998d78f73dca84e0f526d5&mpshare=1&scene=21&srcid=0517Qb5aka0d8eOWyDH1wA4J&key=d8d14ad212b4b61012f481dd842cfc22cc10c6cd52c343e596f25bead9550a4008000381528693db0c6eb4ef7f07748ca1888694e15a21ef629c9d06897a57496ecdfcbcb08bf8549d7eddf66f0e00e7&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=YXwItrGJPOvR%20JPMEFARZqY7Fa0VL1I04zJLMZjGORmd2V5iHKnixxYiG/NG4A5X#wechat_redirect
[- 7]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484453&idx=1&sn=0748aecfb01bb78334cb96e6035536ae&chksm=fc4df664cb3a7f726e67e423ef3627d8a0a210f09995979166eb8036fda4092acba944d95657&scene=21&key=5db3fb3886cb3943f77da0cb4fbb7c759e23da8cd63fe2930b0fa9bf3af1d7c52417bc040ef3d32cea07b9535ea7ed19be60ca2f0e3be8b30fde2cd062e80abe8f81b36f3ae977389ae1b27180fa6ce6&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=sLamrfmySwf16Fp4jsVEusYm4V/%20M29JHNT%20/RdeNOG8QRKXhQa2tPFxvlQtkM9m#wechat_redirect
[- 8]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484457&idx=1&sn=8db7d94a310e1e422a67619fba698dad&chksm=fc4df668cb3a7f7e76814a48f3c4407a5dccc42cf75408a853f9585d3e3a588067e32e15c211&mpshare=1&scene=21&srcid=0523jcWLEwXwRCsU543FMHLJ&key=864cc2c168dd34c660099326e4dbbe9e088a018a7efcfe1b6346465dc7eb574b7117f48e1eeade300152326d8761e2e0cb4c91561bb16a8c9af7c5cae72b79c9e1e391b92fc77182d5e506fe523ddd4d&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=uyIC2I%20l53xiUl/DXZwcfR0ugvnh4pHKyodDE7/63tSmQ5Yjq0jQb9mmNF4DkRha#wechat_redirect
[- 9]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484465&idx=1&sn=53481d7a25a180d5836abba7d338cb57&chksm=fc4df670cb3a7f6653ca40cbaa6802a4a91edfecd093fd132468e7d7ac914493bf1aa7c6f214&mpshare=1&scene=21&srcid=0523nFFJnP3bgLu3pNWhjNpN&key=c558614fb7885320dd18750249c8bc58b521c0da171c4d05a122ad58d45c5680b60102aec1b3167db7b233c0142d9b54b0942485e02d1b90986ffd07a4708fe805cc08497d05c542c51a99266e582eb1&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=uyIC2I%20l53xiUl/DXZwcfR0ugvnh4pHKyodDE7/63tSmQ5Yjq0jQb9mmNF4DkRha#wechat_redirect