WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
1 将业务中的数据分离到单独的数据文件中
我们要在根目录下创建一个data本地数据库文件夹，在data文件夹下创建 newslist-data.js ,然后将newslist.js中onLoad 函数下的 var 复制过来
newslist-data.js
var local_database = [{
date: "Sep 18 2016",
title: "正是虾肥蟹壮时",
imgSrc: "/images/post/crab.png",
avatar: "/images/avatar/avatar.jpg",
content: "菊黄蟹正肥，品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为",
reading: "92",
collection: "65"
},
{
date: "Nov 25 2016",
title: "比利·林恩的中场故事",
imgSrc: "/images/post/bl.png",
avatar: "/images/avatar/2.png",
content: "一“李安是一位绝不会重复自己的导演，本片将极富原创性李安众所瞩目的新片《比利林恩漫长的”",
reading: "112",
collection: "96",
},
{
date: "Nov 12 2016",
title: "当我们在谈论经济学时，我们在谈论什么？",
imgSrc: "/images/post/sls.png",
avatar: "/images/avatar/3.png",
content: "引言在我跟学生课后交流时，以及我在知乎上阅读有关“经济”问题的论题时，经常会遇到这样的情况",
reading: "62",
collection: "92",
}
]
module.exports = {//给数据定义一个出口
postList: local_database
}
2 使用require方法加载js模块儿文件
newslist.js
var postsData = require("../../data/newslist-data.js") //获取数据库中的数据，只能用相对路径
Page({
data: {
//小程序总是会读取data对象来做数据绑定，这个动作我们成为动作A
//而这个动作A的执行，是在onLoad事件执行之后发生的
},
onLoad: function (options) {// 页面初始化 options 为页面跳转所带来的参数
//this.data.postList = postsData.postList //wxml调用时 wx:for={{postList}}
this.setData({
posts_key:postsData.postList
});
},
})
3 template模块的使用
创建一个模板文件夹newslist-item，在该文件夹下创建newslist-item-template.wxml和newslist-item-template.wxss文件
newslist-item-template.wxml
<!-- 使用 name 属性，作为模板的名字 -->
<template name="postItem">
<view class='post-container'>
<view class='post-author-date'>
<image class='post-author' src='{{item.avatar}}'></image>
<text class='post-date'>{{item.date}}</text>
</view>
<text class='post-title'>{{item.title}}</text>
<image class='post-image' src='{{item.imgSrc}}'></image>
<text class='post-title'>{{item.content}}</text>
<view class='post-like'>
<image class='post-like-image' src='../../images/icon/chat.png'></image>
<text class='post-like-font'>{{item.reading}}</text>
<image class='post-like-image' src='../../images/icon/view.png'></image>
<text class='post-like-font'>{{item.collection}}</text>
</view>
</view>
</template>
引入template模板 <import src="newslist-item/newslist-item-template.wxml" />
newslist.wxml
<import src="newslist-item/newslist-item-template.wxml" /> <!-- 引用template模板-->
<view><!-- 页面json配置 只能配置window属性，所以页面json配置中不需要写window -->
<block wx:for="{{posts_key}}" wx:key="posts_key" wx:for-item="item">
<!-- 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入 -->
<template is="postItem" data="{{item}}" />
</block>
</view>
将模板的样式复制到模板的wxss文件下，
newslist-item-template.wxss
.post-container{
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-bottom: 40rpx;
background-color: #fff;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
padding-bottom: 5px;
}
.post-author-date{
margin: 10rpx 0 20rpx 10rpx;
}
.post-author{
width: 60rpx;
height: 60rpx;
vertical-align: middle;
border-radius: 50%;
}
.post-date{
margin-left: 20rpx;
vertical-align: middle;
margin-bottom: 5px;
font-size: 26rpx;
}
.post-title{
font-size: 34rpx;
font-weight: 600;
color: #333;
margin-bottom: 10px;
margin-left: 10px;
}
.post-image{
margin-left: 16px;
width: 100%;
height: 340rpx;
margin: auto 0;
margin-bottom: 15px;
}
.post-content{
color: #666;
font-size: 28rpx;
margin-bottom: 20rpx;
margin-left: 20rpx;
letter-spacing: 2rpx;
line-height: 20rpx;
}
.post-like{
font-size: 13px;
flex-direction: row;
line-height: 16px;
margin-left: 10px;
}
.post-like-image{
height: 16px;
width: 16px;
margin-right: 8px;
vertical-align: middle;
}
.post-like-font{
vertical-align: middle;
margin-right: 20px;
}
在newslist.wxss中直接引入模板样式就可以了 @import"newslist-item/newslist-item-template.wxss";
小程序template模板就到这里了 ^ _ ^
网友评论