【微信小程序】data=“{{...item}}”中...的作用

//js代码 <!-- item: { index: 0, msg: 'this is a template', time: '2016-06-18' } --> //wxml代码 <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template> <template is="msgItem" data="{{...item}}"/> <!-- 输出 0: this is a template Time: 2016-06-18 -->

data="{{…item}}"中的…是ES6中的扩展运算符，该运算符主要用于函数调用，在这里的作用是调用了name=msgItem的模板。

------------------华丽的分割线----------------------

cart.wxml

<import src="../../template/template-cart/template-cart.wxml"/> <view class="container"><template is="cart-list" data="{{...goodsList}}"/> </view> 12345

cart.js

Page({ data: { goodsList: { list: [] } }, onShow: function () { var shopList = [0]; var shopCarInfoMem = wx.getStorageSync('shopCarInfo'); if (shopCarInfoMem) { shopList = shopCarInfoMem.shopNum } this.data.goodsList.list = shopList; this.setGoodsList(shopList); }, setGoodsList: function (list) { this.setData({ goodsList: { list: list } }); }, selectTap: function() { console.log('点击商品') }, touchS: function (e) { console.log(e) }, touchM: function (e) { console.log(e) }, touchE: function (e) { console.log(e) } })

运行

template-cart.wxml

<template name="cart-list"><block wx:if="{{list == 0}}"><view class="kong">购物车空空如也～</view></block><block wx:else><view class="list-top"><view class="label">购物车 共有 {{list}} 件物品</view><view class="edit-btn">编辑</view></view><view class="goodsList"><view class="a-gooods" wx:for="{{list}}" wx:key="{{index}}"><view class="a-goods-conts {{item.active? 'active':''}}"bindtap="selectTap"bindtouchstart="touchS"bindtouchmove="touchM"bindtouchend="touchE"><view class="goods-info"><view class="img-box"><image src="/image/new.jpg" class="img"/></view><view class="text-box"><view class="goods-title">水果</view><view class="goods-label">重量：1kg</view><view class="goods-price">¥ 100</view><view class="buy-num"><view class="jian-btn">-</view><input type="number" value="1" disabled/><view class="jia-btn">+</view></view></view></view><view class="delete-btn" data-index="{{index}}">删除</view></view></view><view class="jiesuan-box"><view class="left-price"><view class="all-selected">全选</view><view class="total">合计：¥ 0</view></view><view class="to-pay-btn">去结算</view></view></view></block> </template>

相关知识

基于微信小程序的宠物医院小程序
微信小程序宠物论坛2
基于微信小程序的宠物医院
基于微信小程序的宠物服务中心小程序
微信小程序 宠物论坛1
基于微信小程序的宠物店商城系统
宠物医院微信小程序源码
基于微信小程序的宠物寄养平台系统
微信小程序宠物论坛3
微信小程序 宠物论坛1[通俗易懂]

网址: 【微信小程序】data=“{{...item}}”中...的作用 https://www.mcbbbk.com/newsview822618.html