timg.jpg
先看效果图
image.png
1.新建一个template文件主要存放通用模板，我这里与pages同级
2.在新建好的template文件中使用template，必须定义name，因为在不同页面进行判断需要通过name判断是哪个template
3.设置wxss样式
4.在需要使用的页面使用import导入wxml页面和wxss文件
5.在哪个文件下使用模板，就通过is来判断是哪个模板，name代表的就是模板的名字
6.data里的值相当于wx:for-item='xxx',默认为item,这里使用es6中展开运算符'...' ...item
7.使用了es6展开运算符后再模板中就无需使用item.xxx
代码呈上
template.wxml
<!--template/template.wxml-->
<template name='headline'>
<view class='content-box'>
<!-- title：渲染的数据 -->
<view class='content-font'>{{title}}</view>
</view>
</template>
template.wxss
/* template/template.wxss */
.content-box{
width: 100%;
height: 300rpx;
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: center;
}
.content-font{
font-size: 36rpx;
color: blue;
}
index.wxml
<!--index.wxml-->
<!-- 引入模板wxml -->
<import src='../../template/template.wxml' />
<view class="container">
<!-- 通过循环dataList数组获取里面值 -->
<!-- is='headline' 判断是哪个模板，必须写，headline：template模板的name名; -->
<!-- data='{{...item}}' 使用es6展开运算符'...'再模板中就没有必要写item.title;直接title -->
<block wx:for='{{dataList}}' wx:key='this'>
<template is='headline' data='{{...item}}'></template>
</block>
</view>
index.wxss
/**index.wxss**/
/* 引入样式 */
@import "../../template/template.wxss";
.container{
display: flex;
}
index.js
Page({
data: {
// 我这里是模拟数据;根据需求自己可以通过调用接口调用获取数据动态渲染
dataList: [{
title: '家具'
},
{
title: '餐厨'
},
{
title: '配件'
},
{
title: '服饰'
},
{
title: '杂货'
}
]
},
onLoad: function() {
}
})
文字颜色动态切换等可以参看我的文章
小程序实现动态修改文字颜色
https://www.jianshu.com/p/832cc92f6d4b
