孙肖宁

微信小程序中的视图与渲染
小编也是刚接触微信小程序,对于一些常见的视图建议大家参考手册就好啦,小编在这里整理了一下常见的细节。大家都知道wx...
扫描右侧二维码阅读全文
19
2018/08

微信小程序中的视图与渲染

小编也是刚接触微信小程序,对于一些常见的视图建议大家参考手册就好啦,小编在这里整理了一下常见的细节。
大家都知道wxml文件都是现实内容的,对于传值过来的数据微信小程序采用的是双大括号来进行数据的绑定的,绑定的数据来源于js文件中的data数据。
wxml

<text>{{ test }}</text>

js

 data:{
    text : "这里是内容",
    btnText : "这是按钮的内容",
    show : false,
    news : ['aaa','bbb','ccc','ddd']
    
 }

按钮的点击事件
xml

 <button type="primary" bindtap="btnClick"> {{btnText}} </button>
  btnClick : function (){

     console.log("按钮被点击了")

     var isShow = this.data.show;
     console.log("isShow:"+isShow)


     var newsdata = this.data.news;
     newsdata.shift()

     this.setData({text:"这是一个新的内容...",show:!isShow,news:newsdata})

 }

渲染标签
if....else....

 <view  wx:if="{{show}}" >{{text}} 1 </view>
 <view  wx:else >{{text}} 2 </view>

for

<view wx:for="{{news}}" wx:for-item="itemx" wx:for-index="ix">

{{ix}} - {{itemx}}

</view>

模板导入
include

 <include src="../templates/header" />

import

 <import src="../templates/footer" />
 <template is="footer2" data="{{text:'导入设置的内容...'}}" />
<template name="footer1">
这是底部内容1  - {{text}}
</template>
<template name="footer2">
这是底部内容2  - {{text}}
</template>

include在导入的时候直接把内容加入到了文件中,import在导入的时候需要使用is来进行选择,而且可以传递数据。

Last modification:August 20th, 2018 at 08:38 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment