小程序Studying——轮番图

最新推荐文章于 2024-09-16 20:46:05 发布

原创最新推荐文章于 2024-09-16 20:46:05 发布 · 293 阅读

1 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用小程序的swiper组件创建轮播图。通过参考一位开发者的文章，详细讲解了在index.wxml、index.wxss和index.js中设置参数和遍历movies数组来显示滑动的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搞了一天小程序，最后看这位大佬https://blog.csdn.net/qq_31383345/article/details/52810380#commentsedit写的，才会这个使用swiper做出轮番图。就是让图片啊，滑动起来，怎么说尼，看吧

先看代码吧

//index.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="slide-image" mode="aspectFill"/>  
        </swiper-item>  
      </block>  
</swiper>

参数说明：

//index.wwss

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

//index.js

const app = getApp()
var util = require('../../utils/util.js');
Page({
  data: {
    animationData:null,
    imgs:[],
    movies:[
      { url: 'https://cdn.pixabay.com/photo/2019/07/03/20/59/abendstimmung-4315445__340.jpg' },
      { url: 'https://cdn.pixabay.com/photo/2019/06/29/05/24/pakistan-4305430__340.jpg '},
      { url: 'https://cdn.pixabay.com/photo/2019/06/24/17/49/mythical-4296587__340.jpg' },
      { url: 'https://cdn.pixabay.com/photo/2019/07/01/01/21/algarve-4309022__340.jpg' }   
    ]
  },

大佬说是便利movies[]数组，<swiper-iterm>就是item，其实里面就是图片的路径，自己可以随便定义哦