一、發(fā)現(xiàn)問題有時候在使用template模板時又使用了列表渲染,然后又想把index值和數(shù)據一同傳入data <!-- test/test-template/test-template.wxml --> <template name="stdInfo"> <view> <!-- 這里用到了index --> <text>{{index + 1}} </text> <text>{{title}}</text> <text> {{name}}</text> </view> </template> <!--pages/test/test.wxml--> <import src="./test-template/test-template.wxml" /> <view> <template is="stdInfo" wx:for="{{stdInfo}}" data="{{...stdInfo[index]}}"></template> </view> // pages/test/test.js Page({ data: { stdInfo: [ { name: "lostexin", age: 21, gender: "m", title: "老子是魔法少女" }, { name: "afei", age: 21, gender: "m", title: "邪王真眼" } ] } }) 想要index從外部傳入,而不想寫在js文件的data中(即從后端獲取過來,填充到data里) 二、解決問題首先說明一下擴展運算符,它是ES6的語法,它的作用是“將一個數(shù)組轉為用逗號分隔的參數(shù)序列” console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>] 注: ES2018將這個運算符引入了對象,所以也可以對對象這么整,參考:阮一峰老師《ES6入門》數(shù)組擴展和對象擴展章節(jié) 改寫代碼,如下 <!--pages/test/test.wxml--> <import src="./test-template/test-template.wxml" /> <view> // 注意最后兩個花括號和前面的花括號要隔開,不然會報錯 <template is="stdInfo" wx:for="{{stdInfo}}" data="{{...stdInfo[index], ...{index: index, name: item.name} }}"></template> </view> 最后輸出結果 |