php 小程序轮播图,微信小程序 swiper组件构建轮播图的实例

微信小程序 swiper组件构建轮播图的实例

实现效果图：

wxml基础文件：

swiper-item仅可放置在组件中，宽高自动设置为100%。

参数设置：

autoplay 自动播放导致swiper变化；

touch 用户划动引起swiper变化；

indicator-dots true是否显示面板指示点圆圈；

interval 自动切换时间间隔；

duration 滑动动画时长;

更多设置可以看官方文档组件！

wxss样式文件

swiper{

width:100%;

height:500rpx;

}

swiper image{

width:100%;

height:500rpx;

}

app.json文件入口

{

"pages": [

"pages/redirect/redirect"

],

"window": {

"navigationBarBackgroundColor": "#405f80"

}

}

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！