
微信小程序开发会用到图片轮播,今天我们讲一下!
工具/原料
1.微信web开发者工具微信开发者账号
方法/步骤
2.首先我们需要建立一个项目,或者打开已有的项目,准备几张大小一样的图片。我们以3张为例子,准备了3张图片放到项目下的images文件夹。
3.我们在wxml 文件粘贴上以下代码。<swiper indicator-dots={{indicatorDots}}autoplay={{autoplay}} interval={{interval}} duration={{duration}} circular=true><block wx:for={{imgUrls}}><swiper-item><navigator url={{item.link}} hover-class=navigator-hover><image src={{item.url}} class=slide-image width=355 height=150/></navigator></swiper-item></block> </swiper>
4.在JS文件的data粘贴上以下代码,红的边框里面的是点击跳转的路径。l绿色边框的是图片的路径。
5.imgUrls: [
6.{
7.link: '/pages/index/index',
8.url: '/images/1.jpg'
9.}, {
10.link: '/pages/logs/logs',
11.url: '/images/2.jpg'
12.}, {
13.link: '/pages/index/index',
14.url: '/images/3.jpg'
15.}
16.],
17.indicatorDots: true, //小点
18.autoplay: true, //是否自动轮播
19.interval: 3000, //间隔时间
20.duration: 3000, //滑动时间
21.我们都添加好了以后,保存一下,预览一下效果。图片有点变形。
22.我们在wxml的<image>标签添加一个
23.mode='aspectFit',使图片保持比例。
24.这样就实现了图片轮播的效果,那么更多的效果,例如颜色,滑动时间等等,大家可以去开发者API查看。
注意事项
25.图片轮播的尺寸都要一样,否则影响轮播美观效果。













