微信小程序开发会用到图片轮播,今天我们讲一下!
工具/原料
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.图片轮播的尺寸都要一样,否则影响轮播美观效果。
微信小程序图片轮播的代码-小程序轮播代码金
浏览量:4216
时间:
来源:金牛嘿嘿130
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。
最新资讯
-
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
阿坝小程序代理
阿坝藏族羌族小程序代理公司有哪些?阿坝藏族羌族小程序代理平台哪个好?阿坝藏族羌族小程序代理商怎么收费,代理政策如何?下面就让即速应用产品经理jisuapp.cn来告诉你吧!