微信小程序 数据绑定/条件判断/列表渲染/shift()有坑，emplate模板的使用 ...

作者：xiaochun365，来自原文地址

一：数据绑定/条件判断/列表渲染/shift()有坑

1. //获取页面组件数据
2.  
3. var v = this.data.element
4.  
5. //条件判断
6.  
7. <view wx:if="{{show}}">小红</view>
8.  
9. <view wx:else="{{!show}}">小绿</view>
10. //wx:if wx:else 之间不允许有别的组件

1. //列表渲染
2.  
3. <view wx:for="{{list}}">第{{index}}项是：{{item}}</view> //小程序默认索引为index,项是item,当然也可以自定义，如下：
4.  
5. <view wx:for="{{list}}" wx:for-index="{{myIndex}}" wx:for-item="{{myItem}}" wx:for-key="{{myIndex}}">第{{myIndex}}项是：{{myItem}}</view>

1. //数据绑定
2.  
3. //wxml
4.  
5. <view>{{element}}</view>
6.  
7. //js
8.  
9. //初始化数据
10.  
11. data:{
12.  
13. element:"123456"
14.  
15. }

1. 注意：shift()的使用，有坑！
2.  
3. data:{
4.  
5. list:["123","456","789"]}
6.  
7. btnClick:function(){
8. var myList = this.data.list
9.  
10. var a = myList.shift() //a获取myList的第一项
11.  
12. myList.shift() //删除最后一项
13.  
14. this.setData({
15. list：myList
16. })
17. }

二：template模板的使用

1. //模板t1.wxml
2. <template name="ggg">
3. <view>
4. 88888888888888888888888
5. </view>
6. </template>
7. <template name="jjj">
8. <view>
9. 99999999999999999999999
10. </view>
11. </template>

1. //调用模板index.wxml
2. <import src="../templates/t1" />
3. <template is="ggg"/>
4. <template is="jjj"/>
5.  
6. //注意此处必须要有
7. //调用模板样式
8. @import "../templates/template1.wxss";
9.  
10. //调用模板js
11. require('../templates/t1.js') //模板的js不允许出现Page()等方法
12.  
13.  
14.  
15.  
16. //见有人这么写index.wxml
17. <include src="../templates/t1" />