小程序模板网

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

发布时间:2018-04-16 11:53 所属栏目:小程序开发教程

作者: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" />


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23502.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询