微信小程序-轮播图

最新推荐文章于 2024-05-14 02:44:36 发布

XGB的工具箱

最新推荐文章于 2024-05-14 02:44:36 发布

阅读量266

点赞数

分类专栏：那些用过的android技术那些用过的微信小程序技术文章标签：微信小程序轮播图

本文链接：https://blog.csdn.net/weixin_41603612/article/details/81203704

版权

那些用过的微信小程序技术同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

那些用过的android技术

2 篇文章 0 订阅

订阅专栏

wxml代码：

<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">    
  <block wx:for="{{movies}}" wx:for-index="index">    
    <swiper-item>    
       <image src="{{item.url}}" class="swiper-image" mode="widthFix"/>    
    </swiper-item>    
  </block>    
</swiper>

分析：

indicator-dots："true" 设置样式自定义

autoplay="true" 设置是否自动轮播

interval="5000" 设置轮播间隔

duration="1000" 设置轮播一次用时

js中轮播图的代码：

data: {
    /**
     * 轮播图
     */
    movies: [
      { url: 'https://pic1.58cdn.com.cn/p1/big/n_v2ef471c2fdb234bafb1bff7086379acbb.jpg' },
      { url: 'https://pic1.58cdn.com.cn/p1/big/n_v2ee7aea4150b745cb916627e419dcfb62.jpg' },
      { url: 'https://pic1.58cdn.com.cn/p1/big/n_v26182764b6f954c2f9fdd314702775e3e.jpg' },
      { url: 'https://pic1.58cdn.com.cn/p1/big/n_v2ccb30848d6774b9ca5819a7781ac9e26.jpg' }
    ]
  
  },