微信小程序-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:'这是新内容'});
}
})

效果图如下：