小程序实现自动轮播图效果————（2020.1.3学习笔记）

最新推荐文章于 2024-04-20 18:10:34 发布

曾胖神父

最新推荐文章于 2024-04-20 18:10:34 发布

阅读量647

点赞数

分类专栏：小程序学习笔记文章标签：小程序

本文链接：https://blog.csdn.net/qq_37704442/article/details/103824966

版权

小程序学习笔记专栏收录该内容

24 篇文章 1 订阅

订阅专栏

微信小程序自带轮播图的组件，所以直接调用（代码如下）

<swiper class="swiper"
   circular="true"
   autoplay="true"
   interval="3000"
   duration="300"
   indicator-dots="true"
   indicator-active-color="#ff577">
<block wx:for="{{banners}}" wx:key="{{index}}">
<swiper-item class="swiper-item">
<image src="{{item.image}}" mode="widthFix"/>

</swiper-item>
</block>
</swiper>

其中swiper的circular属性，决定是否采用衔接滑动，autoplay属性决定是否自动轮播，interval属性决定自动切换时间间隔，duration属性决定滑动动画时长，indicator-dots和indicator-active-color属性决定是否显示面板指示点和指示点颜色。

然后轮播图没数据是没办法显示图片的，所以第二步就是获取数据，但因为这里没服务器，所以这里直接在本地声明所需数据（代码如下）

  data: {
       banners:[
        {image:'https://i0.hdslb.com/bfs/archive/7cbb50f72bbac972e8ba760c1ca01ab31906b624.jpg@1100w_484h_1c_100q.jpg'},
        {image:'https://i0.hdslb.com/bfs/archive/cd8c899fa02738edd84221e8d7e82dc1caf7ba81.jpg@1100w_484h_1c_100q.jpg'},
        {image:'https://i0.hdslb.com/bfs/archive/d444caba56094cd3036e7fef4c211f279784c8fd.jpg@1100w_484h_1c_100q.jpg'},
        {image:'https://i0.hdslb.com/bfs/sycp/creative_img/202001/069f736ee91daac0ce588fe62d4d7289.jpg@1100w_484h_1c_100q.jpg'},

       ],
     
  },