微信小程序> 微信小程序图片轮播的代码-小程序轮播代码金

微信小程序图片轮播的代码-小程序轮播代码金

浏览量:4204 时间: 来源:金牛嘿嘿130
微信小程序图片轮播的代码

微信小程序开发会用到图片轮播,今天我们讲一下!

工具/原料

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.图片轮播的尺寸都要一样,否则影响轮播美观效果。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎