【微信小程序】微信小程序swiper组件以及template模板的应用

微信小程序swiper及template使用

大家好！小白第一次写博客，希望大家多多鼓励！最近写了一个微信小程序，想对微信小程序里面的swiper组件和template模板，做出如下总结：

swiper组件实现轮播图

首先，我们来看一下官方文档是如何介绍swiper组件？
微信小程序官方文档
我们选取swiper组件下的indicator-dots属性，interval属性以及autoplay属性进行展示

1. autoplay属性 ：是否自动切换，属于boolean类型；
2. interval属性 :自由切换时间（5000是人们可以接受的视觉效果）；
3. indicator-dots属性 ：是否显示面板指示点（通俗的说，就是轮播图下面的小圆点）；
   步骤如下：
   1，wxss代码：

swiper {
    
     
 width: 100%; 
 height: 500rpx;
 }
swiper image {
    
     
 width: 100%;  height: 500rpx;
 }

2， wxml代码：

<view>  
  <swiper indicator-dots="true" interval="5000" autoplay="true">      <swiper-item>  
        <image src="../../images/avatar/9.jpg"></image>      </swiper-item>    
          <swiper-item>   
               <image src="../../images/avatar/10.jpg"></image>      </swiper-item> 
                    <swiper-item>     
                       <image src="../../images/avatar/12.jpg"></image>    
                         </swiper-item>  
                           </swiper>
                           </view>

效果图如下：

template模板的使用

使用情况：当需要写相同重复的代码时，可以利用template模板把代码分离出去

比如：现在需要把下面的效果图进行++
步骤：
1，重复代码：posts.wxss代码

.post-container{
    
     
 flex-direction: column;  display:flex;  margin-top: 20rpx;  margin-bottom: 40rpx;  margin-left: 0rpx;  background-color: #fff;  border-bottom: 1px solid #ededed;  border-top: 1px solid #ededed;  padding-bottom: 5px;
}
.post-author-data{
    
      margin-top: 10rpx;  margin-bottom: 20rpx;  margin-left: 10rpx;
}
.post-author{
    
     
 width: 60rpx;  height: 60rpx;  vertical-align: middle;}.post-data{
    
      margin-left: 26rpx;  margin-bottom: 10px;
}
.post-title{
    
      font-size: 34rpx;  font-weight: 600;  color: #333;  margin-bottom: 10px;  margin-left: 10px;}
.post-content{
    
      color: #666;  font-size: 28rpx;  margin-bottom: 20rpx;  margin-left: 20rpx;  letter-spacing: 2rpx;  line-height: 40rpx;}
.post-like{
    
      font-size:13px;  flex-direction: row;  line-height: 16px;  margin-left: 10px;}
.post-image{
    
      margin-left: 16px;  width: 100%;  height: 340rpx;  margin: auto 0;  margin-bottom: 15px;}
.post-like-image{
    
      height: 16px;  width: 16px;  margin-right: 8px;  vertical-align: middle;
}
.post-like-font{
    
      vertical-align: middle;  margin-right: 20px;
}

2,把posts.wxss重复的片段利用template分离到template.wxss中
首先，建一个template的wxml和wxss的文件（我建了一个post-item-template.wxml以及post-item-template.wxss）

其次，把posts.wxss中重复相同的代码复制粘贴到post-item-template.wxss中（posts.wxss重复的代码可删去）

最后，在posts.wxss 最上一句加上这段代码

@import"post-item/post-item-template.wxss";//@导入import"路径"（一定要加@符号）

3,把post.wxml重复的片段利用template分离到template.wxml中

首先，把重复相同的post.wxml代码复制粘贴到post-item-template.wxml中（posts.wxml重复相同的代码可删去）

其次，wxml代码以及注释如下：

<block wx:for="{
    
    {postList}}" wx:for-item="item" wx:key="key" wx:for-index="idx"> //一共要写三个文本，可用for循环
 <view catchtap="onPostTap" data-postId="{
    
    {item.postId}}">//item属性    <template is="postItem" data="{
    
    {...item}}" />  //template模板
   </view>       
    </block>

最后，要在post-item-template最上面一句加上这一段代码

<template name="postItem" >

注意的是：
在post.wxml里命名的要与post-item-template.wxml一样.

post.wxml:

 <template is="postItem"/>

post-item-template.wxml:

<template name="postItem" />

效果图如下：