PHP前端开发

图片轮播组件gallery slider使用方法详解

百变鹏仔 4天前 #前端问答
文章标签 使用方法

本文主要和大家详细介绍了微信小程序图片轮播组件gallery slider的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

先上效果图:

wxml


<scroll-view> <view>  <swiper>    <block>      <navigator>       <swiper-item>        <block>         <image></image>        </block>        <block>         <image></image>        </block>       </swiper-item>      </navigator>    </block>  </swiper> </view></scroll-view>

wxss


.imgw{width:100%;}

js


/** *页面的初始数据 */data: { banner_url: data.bannerList(), open: false, indicatorDots: true,//是否显示面板指示点 autoplay: true,//是否开启自动切换 interval: 3000,//自动切换时间间隔 duration: 500//滑动动画时长}

最终效果:

总结:

1. scroll-view组件的作用是可以触发触摸滑动
2. swiper组件的作用是制作图片自动切换,形成轮播
3. navigator组件的作用是给每个图片添加链接
主要是scroll-view和swiper两个组件制作成可滑动的轮播组件。