小程序template

首先写模板，然后调用模板

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 {

width: 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() {

},

})

 

转载于:https://www.cnblogs.com/ylblogs/p/9708455.html