（四）微信小程序之实现轮番效果（swiper）

最新推荐文章于 2024-10-09 09:35:08 发布

Tiramisu_C

最新推荐文章于 2024-10-09 09:35:08 发布

阅读量1.2w

点赞数 2

分类专栏：微信小程序微信小程序Step by step 文章标签：微信小程序轮番 swiper

本文链接：https://blog.csdn.net/nongweiyilady/article/details/54144209

版权

本文介绍了如何在微信小程序中使用swiper组件创建图片轮播效果，包括设置动画切换间隔、数据绑定以及swiper组件的关键属性，如indicator-dots、autoplay、interval和duration等。示例展示了实际应用中的配置和页面结构代码。

摘要由CSDN通过智能技术生成

轮番效果在很多的网站主页或者手机应用端都能看到，在微信小程序中使用swiper组件来实现图片轮番，今天的小例子效果如下：

为了方便演示我将动画切换的间隔调整为3s，现实项目中一般为5s，具体看项目需求而定。

实现图片轮番使用swiper滑块视图容器组件，页面结构文件代码如下：

<!--mySwiper.wxml-->
<view class="container">
    <swiper indicator-dots="{
  {indicatorDots}}"
    autoplay="{
  {autoplay}}" interval="{
  {interval}}" duration="{
  {duration}}">
        <block wx:for="{
  {imgUrls}}">
            <swiper-item>
               <image src="{
  {item}}" class="slide-image" width="355" height="150"/>
            </swiper-item>
        </block>
    </swiper>
</view>

忽略最外层的父容器view和组件属性，页面文件结构简化如下࿱