微信小程序—轮播、定义模板、调用模板

微信小程序—轮播、定义模板、调用模板
作者：邱名涛
撰写时间：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%;
}