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

先上效果图:

wxml



 
  
    
      
       
        
         
        
        
         
        
       
      
    
  
 
登录后复制

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两个组件制作成可滑动的轮播组件。

相关推荐:

React Native竖向轮播组件的封装详解

React Native 通告消息竖向轮播组件的封装详解

JavaScript实现图片轮播组件代码示例

以上就是图片轮播组件gallery slider使用方法详解的详细内容,更多请关注慧达安全导航其它相关文章!

点赞(0)

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部