微信小程序轮播图片

深藏阁楼爱情的钟 2022-08-30 04:12 291阅读 0赞

# 轮播图片的实现 #

使用swiper实现图片轮播功能

--------------------

# 一、效果展示 #

![在这里插入图片描述][20210718222522120.gif_pic_center]

# 二、用到的属性 #

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>indicator-dots</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否显示面板指示点</td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否自动切换</td> 
  </tr> 
  <tr> 
   <td>interval</td> 
   <td>number</td> 
   <td>5000</td> 
   <td>否</td> 
   <td>自动切换时间间隔</td> 
  </tr> 
  <tr> 
   <td>duration</td> 
   <td>number</td> 
   <td>500</td> 
   <td>否</td> 
   <td>滑动动画时长</td> 
  </tr> 
  <tr> 
   <td>circular</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否采用衔接滑动</td> 
  </tr> 
 </tbody> 
</table>

来自官方swiper开放文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

# 二、代码 #

index.wxml：

<swiper indicator-dots="ture" autoplay="ture" interval="3000" duration="800"  circular='ture' class="swiper">
      <swiper-item>
        <image src="/pages/img/建筑1.jpg" class="swipimg" />
      </swiper-item>
      <swiper-item>
        <image src="/pages/img/建筑2.jpg" class="swipimg" />
        </swiper-item>
    </swiper>

index.wxss：

.swiper{ 
      height: 400rpx;
    }
    .swipimg { 
      width: 100%;
    }

样式可以自行修改

--------------------

# 总结 #

本文仅仅简单介绍了swiper的使用。

## 新的改变 ##

最近做了一个展示类的小程序，大家如果感兴趣可以关注一下，我会更新这个小程序所有功能，包括前端。小程序的名字叫淘湖，第一次做小程序，查询了不少例子才完成的，希望大家多多包涵O(∩\_∩)O~。

**文章未经同意不能转载！！！**

[20210718222522120.gif_pic_center]: /images/20220829/8bea2b7eb6fb4a878a7cdbd09de251e6.png