Ambition-xwj
Ambition-xwj

微信小程序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>

效果图如下：
微信小程序swiper组件以及template模板的应用_第1张图片

template模板的使用

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

比如：现在需要把下面的效果图进行++
微信小程序swiper组件以及template模板的应用_第2张图片步骤：
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）
微信小程序swiper组件以及template模板的应用_第3张图片
其次，把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属性