微信小程序-UI控件的使用(2)

微信模版的使用：
新建一个templates目录，新建header.wxml,footer.wxml两个模版文件

header.wxml

<template  name="header1">
   <view class="header">
     <text>这是头部模版-{{title}}</text>
   </view>
</template>

footer.wxml

<template name="footer1">
   <view class="footer">
     <text>这是底部模版1-{{title}}</text>  
   </view>
</template>

<template name="footer2">
   <view class="footer">
     <text>这是底部模版2-{{title}}</text>
   </view>
</template>

在app.wxss中写入样式：

.header{
    width: 100%;
    height: 44px;
    background-color: lightblue;
    text-align: center;
}
.header text{
    line-height: 44px;
}

.footer{
    width: 100%;
    height: 44px;
    background-color: lightblue;
    text-align: center;
}
.footer text{
    line-height: 44px;
}

.content{
    width: 100%;
    height: 400px;
    background-color: green;
}

模版的使用：

<!--include 是把所有的头部导入-->
<!--<include src="../templates/header"/>-->
<import src="../templates/header"/>
<template is="header1" data="{{title:'index header'}}" />

<view class="content">
   <text>zw learn weixin</text>

</view>



<import src="../templates/footer"/>
<!--指定特定的footer-->
<template is="footer1" data="{{title:'index footer'}}"/>

include和inport的区别：
include是将目标文件进行内容进行拷贝
inport是将目标文件进行导入，可以设置多个模版

---

点击事件和循环操作

<view class="content">
   <text>zw learn weixin</text>
   <button type="warn" size="{{default}}"  bindtap="warnclick"> warn </button>
   <text wx:if="{{isShow}}">{{text}}</text>

   <view wx:for="{{news}}">
      <text>{{index}}-{{item}}</text>
   </view>

   <view wx:for="{{news}}" wx:for-index="idx" wx:for-item="new">
      <text>{{idx}}-{{new}}</text>
   </view>
</view>

index.js:

Page({
  data:{
    text:"这是显示内容",
    isShow:false,
    news:['new1','new2','new3','new4']
  },
  onLoad:function(options){
    // 生命周期函数--监听页面加载

  },
  onReady:function(){
    // 生命周期函数--监听页面初次渲染完成

  },
  onShow:function(){
    // 生命周期函数--监听页面显示

  },
  onHide:function(){
    // 生命周期函数--监听页面隐藏

  },
  onUnload:function(){
    // 生命周期函数--监听页面卸载

  },
  onPullDownRefresh: function() {
    // 页面相关事件处理函数--监听用户下拉动作

  },
  onReachBottom: function() {
    // 页面上拉触底事件的处理函数

  },
  onShareAppMessage: function() {
    // 用户点击右上角分享
    return {
      title: 'title', // 分享标题
      desc: 'desc', // 分享描述
      path: 'path' // 分享路径
    }
  },
  warnclick:function(){
     var show = this.data.isShow;
     var newtext = '';
     this.setData({isShow:!show,text:'这是新内容'});
  }
})

效果图如下：