微信小程序—轮播、定义模板、调用模板
作者:邱名涛
撰写时间:2019 年10 月18日
使用工具:微信开发者工具
1、在父目录里创建一个子目录作为模板,新建.wxml和.wxss
wxml代码:
<!--定义模板template名称name=""-->
<template name="Datas">
<view class="articlelist">
<view class="author-time">
<image class="author-icon" src="{{authorIcon}}"></image>
<text class="author-name">{{authorName}}</text>
<text class="author-date">{{authorDate}}</text>
<!--解释:三个点的意思
{
"authorName":"Wsp"
},
{{...item}}==Js文件(useData: newsData.initData)
is==指定子目录的模板名称
-->
</view>
<text class="title">{{title}}</text>
<image class="article-img" src="{{articleImg}}"></image>
<text class="article-text">{{articleText}}</text>
<view class="article-like">
<image class="article-like-icon" src="../assets/img/6.png"></image>
<text class="article-like-text">{{articleLikeSe}}</text>
<image class="article-like-icon" src="../assets/img/7.png"></image>
<text class="article-like-text">{{articleLikeComment}}</text>
</view>
</view>
</template>
wxss代码:
/* 文章样式 */
.articlelist {
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-bottom: 40rpx;
background-color: #fff;
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
padding: 10px;
padding-bottom: 5px;
}
/* 显示时间 */
.author-time {
margin-top: 10rpx;
margin-bottom: 20rpx;
}
/* 微信用户头像 */
.author-icon {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
vertical-align: middle; /*上下垂直居中 */
}
.author-name {
margin-left: 20rpx;
}
.author-date {
margin-left: 20rpx;
vertical-align: middle;
margin-bottom: 5px;
font-size: 26rpx;
}
/* 标题名称 */
.title {
font-size: 34rpx;
font-weight: 700;
color: #333;
margin-bottom: 10px;
}
/* 文章图片(居中显示) */
.article-img {
margin-left: 16px;
width: 100%;
height: 340rpx;
margin: auto 0;
margin-bottom: 15px;
}
/* 文章内容 */
.article-text {
color: #666;
font-size: 26rpx;
margin-bottom: 20rpx;
letter-spacing: 2rpx; /* 两个字的间距*/
line-height: 40rpx;
}
.article-like {
font-size: 13px;
flex-direction: row; /* 水平布局*/
line-height: 16px;
}
.article-like-icon{
height: 16px;
width: 16px;
margin-right: 8px;
vertical-align: middle;
}
.article-like-text{
vertical-align: middle;
margin-right: 20px;
}
2、然后引入lunbo-template模板路径。并且用is绑定引用进来的模板名称
wxml代码:
<!--引入模板文件lunbo-template.wxml-->
<import src="lunbo-template/lunbo-template.wxml" />
<view class="news-container">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circular}}">
<swiper-item>
<image src="../assets/img/8.jpg"></image>
</swiper-item>
<swiper-item>
<image src="../assets/img/9.jpg"></image>
</swiper-item>
<swiper-item>
<image src="../assets/img/10.jpg"></image>
</swiper-item>
</swiper>
<block wx:for="{{useData}}" wx:for-item="item" wx:key="key">
<!--
1、初始化调用
item={
"newsid": 1,
"authorIcon": "../assets/img/11.png",
"authorName": "Wsp",
"authorDate": "2019/10/10",
"title": "愿时光待你如初",
},
2、使用data="{{...item}}"定义
{{...item}}==> "newsid": 1,
"authorIcon": "../assets/img/11.png",
"authorName": "Wsp",
"authorDate": "2019/10/10",
"title": "愿时光待你如初",
3、使用==> newsid
authorIcon
authorName
authorDate
title
-->
<template is="Datas" data="{{...item}}" />
</block>
</view>
wxss代码:
/* @import"...";引入模板css样式 */
@import "lunbo-template/lunbo-template.wxss";
/* 轮播样式 */
.news-container{
background-color: #f1f1f1;
}
.news-container swiper {
width: 100%;
height: 400rpx;
}
.news-container swiper image {
width: 100%;
}