小程序幻灯片组件swiper使用。

幻灯片实现效果:

小程序幻灯片组件swiper使用。_第1张图片

小程序组件:swiper


一、在当前页面的初始数据设置轮播图片数组:

  data: {
      banner:[
        '../assets/images/banner1.jpg','../assets/images/banner2.jpg','../assets/images/banner3.jpg'
      ]
  },
使用数组形式设置图片src属性图片地址,使用wx:for循环调用幻灯片图片地址:



使用组件循环出幻灯片图片。 wx:for="{{banner}}" 循环遍历页面初始数据里设置的图片地址数组。

src="{{item}}" 为图片调用地址的当前项目(即循环中的每个当前项目)。


swiper 属性:

indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色
indicator-active-color Color #000000 当前选中的指示点颜色
autoplay Boolean false 是否自动切换

swiper-item

仅可放置在组件中,宽高自动设置为100%。

小程序幻灯片组件swiper使用。_第2张图片






你可能感兴趣的:(小程序,小程序banner,小程序幻灯片,swiper)