微信小程序视图容器(swiper)组件创建轮播图

前端之家收集整理的这篇文章主要介绍了微信小程序视图容器(swiper)组件创建轮播图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、视图容器(Swiper)

1、swiper:滑块视图容器

nofollow" target="_blank" href="https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html">微信官方文档

二、swiper应用

页面逻辑(index.js)

自动轮播 interval: 3000,//间隔时间 duration: 3000,//滑动时间 }

其中 imgUrls 是我们轮播图中将要用到的 图片地址和 跳转链接

indicatgorDots 是否出现焦点

autoplay 是否自动播放

interval 自动播放间隔时间

duration 滑动动画时间

页面结构(index.wxml)

注意:swiper 千万不要在外面 加上任何标签 例如 之类的 ,如果加了可能会导致轮播图出不来

页面样式(index.wxss)

三、小程序效果

赶快动手实践就可以看到如图所示效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的微信小程序相关文章