微信小程序（四） 模板的使用

模板的使用：单独建立一个页面，在另一个页面通过name属性名调用使用（注意要导入模板路径）

template.wxml页面

list.wxml页面

 

 

周刊静态页面

 

template.wxml代码如下：

<!--pages/template/template.wxml-->
<template name='listTmp'>
<view class="tmpContainer">
<view class="avatar_date">
<image src="/static/images/011.jpg"></image>
<text>Jan 15 2019</text>
</view>
<text class="user">阿童木</text>
<image class="contentImg" src="/static/images/001.jpg"></image>
<text class="content">测试专用测试专用测试专用测试专用测试专用测试专用测试专用测试专用测试专用测试专用测试专用测试专用测试专 </text>
</view>
<view class="collection_love">
<image src="/static/images/star.png"></image>
<text>88</text>
<image src="/static/images/eye.png"></image>
<text>88</text>
</view>
</template>

template.wxss样式代码如下：

/* pages/template/template.wxss */
.tmpContainer{
display:flex;
flex-direction: column;
}
.avatar_date{
padding: 10rpx;
}
.avatar_date image{
width:60rpx;
height:60rpx;
border-radius: 50%;
vertical-align:middle; /*解决基线对齐*/
margin-right: 10rpx;
}

.avatar_date text{
font-size:32rpx;
}
.user{
margin-left: 10rpx;
font-size: 36rpx;
font-weight: 700;
margin:10rpx;
}
.contentImg{
width:100%;
height:460rpx;

}
.content{
font-size:32rpx;
text-indent:64rpx;
}
.collection_love image{
width:32rpx;
height: 32rpx;
vertical-align: middle;
margin-left: 10rpx;
}
.collection_love text{
font-size:28rpx;
margin-left: 5rpx;
margin-right: 10rpx;
}

注意事项：

list页面使用模板时需要先导入引入文件（template.wxml，template.wxss）

wxml引入文件格式：<import src="/pages/template/template.wxml" />

wxss引入文件格式：@import '/pages/template/template.wxss';

 

list.wxml代码如下：

<!--pages/list/list.wxml-->
<import src="/pages/template/template.wxml" />
<view>
<swiper indicator-dots indicator-color='yellowgreen'
indicator-active-color='pink'>
<swiper-item>
<image src="/static/images/a.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/static/images/y.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/static/images/s.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/static/images/t.jpg"></image>
</swiper-item>
</swiper>
<view>
<template is='listTmp'/>
</view>
</view>

list.wxss代码如下：

/* pages/list/list.wxss */
@import '/pages/template/template.wxss';
swiper{
width:100%;
height:400rpx;
}
swiper image{
width:100%;
height:100%;
}