微信小程序之swiper轮播图

微信小程序,一个不是app胜似app的开发工具,更加准确的说是开发途径,给非专业开发app的同学们提供了一个绝妙的选择

轮播图几乎是每一个网站、app必有得一个展示区,用于醒目自己的特点、特色。了解微信小程序开发的同学都会知道它的目录以及.js、.wxml、.wxss的所代表的文件意义

在index.wxml中使用swiper(滑块视图容器)做轮播图


  
  
  
在index.js文件中定义imgUrls数组以及swiper的各个属性值,其属性代表什么含义参考开发文档 https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1476197489605

Page({
    data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  }
})
注:在小编的测试过程中,发现,如果swiper被等标签包围的话是不能出现轮播图的,也可能是技不如人吧

最后,调试,就会展现轮播图。试试吧,如果不行,可以留言交流
微信小程序之swiper轮播图_第1张图片

你可能感兴趣的:(微信小程序,微信,微信小程序)