首先写模板，然后调用模板
moban.wxml
<template name="wode">
<view wx:for="{{wd}}">
<image src='{{item.src}}' mode='aspectFill'></image>
<text>{{item.text}}</text>
</view>
</template>
moban.wxss
text {
color: red;
text-align: center;
display: block;
}
image {
100rpx;
height: 100rpx;
display: block;
margin: 0 auto;
}
调用
<!--pages/demo/demo.wxml-->
<import src="../moban/moban" />
<view>
<template is="wode" data="{{...item}}" />
</view>
/* pages/demo/demo.wxss */
@import "../moban/moban.wxss";
// pages/demo/demo.js
Page({
/**
* 页面的初始数据
*/
data: {
item: {
wd: [{
src: 'http://pic.pptbz.com/201506/2015070581208537.JPG',
text: '你好'
},
{
src: 'http://pic.pptbz.com/201506/2015070581208537.JPG',
text: '是的'
},
{
src: 'http://pic.pptbz.com/201506/2015070581208537.JPG',
text: '也是'
},
{
src: 'http://pic.pptbz.com/201506/2015070581208537.JPG',
text: '我的'
},
]
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
})