小程序之轮播图

最新推荐文章于 2023-04-13 19:40:27 发布

勉后之幸

最新推荐文章于 2023-04-13 19:40:27 发布

阅读量231

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_41219388/article/details/102967072

版权

微信小程序专栏收录该内容

13 篇文章 1 订阅

订阅专栏

关于swiper中一些属性以及属性的说明，可以参考开发文档https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

首先，在js文件中定义需要轮播的图片以及属性

data: {
    imgs: [
      '../../img/1.1.png',
      '../../img/2.png',
      '../../img/4.1.png'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 500,
},

其次，页面代码

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgs}}" wx:key="unique">
      <swiper-item>
        <image src="{{item}}" class="slide-image"></image>
      </swiper-item>
    </block>
</swiper>

最后，我给图片设置了宽高

.slide-image{

width: 100%;

height: 150px;

}

这样就可以完成一个轮播图了