微信小程序---模版

微信小程序用的是否娴熟，会灵活使用模版很重要。

新建一个template文件，做一个step模版。

<template name="top">
　　<view class="stepitem {{item.stepThis?'orange':''}}">
　　　　<view wx:if="{{item.gonext}}" class='gonext'>></view>
　　　　<view class='top_num'>{{item.num}}</view>
　　　　<text class='top_msg'>{{item.msg}}</text>
　　</view>
</template>

 

utils:

const steps = [

　　{ num: "①", stepThis: true, msg: "第一步", gonext: true },

　　{ num: "②", stepThis: false, msg: "第二步", gonext: true },

　　{ num: "③", stepThis: false, msg: "第三步", gonext: true },

　　{ num: "④", stepThis: false, msg: "第四步", gonext: true },

　　{ num: "⑤", stepThis: false, msg: "第五步", gonext: false },

]

 

在页面中使用模版：

is="top"---绑定设定的模版，对应自定义模版中name="top"

wxml:

<import src="../../template/step/step.wxml" />

<view class='topHeader'>
　　<block wx:for="{{steps}}" wx:for-index="idx" wx:for-item="item">
　　　　<template is="top" data="{{item}}" />
　　</block>
</view>

 

js:

const utils = require('../../utils/util.js');

data: {

　　steps: utils.steps

}

onLoad: function (option) {

　　var _this = this;

　　var up1 = "steps[" + 1 + "].stepThis";

　　var up2 = "steps[" + 2 + "].stepThis";

　　var up3 = "steps[" + 3 + "].stepThis";

　　var up4 = "steps[" + 4 + "].stepThis";

　　this.setData({

　　　　[up1]: true,

　　　　[up2]: true,

　　　　[up3]: true,

　　　　[up4]: true

　　});

 }

 

设定对象的值--var up1 = "steps[" + 1 + "].stepThis";  [up1]: true,