先看效果图

轮播组件banner

属性

list：banner数据，格式：[{"title":"中国卫星","imgUrl":"https://gimg3.baidu.png"},{"title":"美国卫星","imgUrl":"https://gimg3.baidu.png"},{"title":"俄罗斯卫星","imgUrl":"https://gimg3.baidu.png"}]，可以添加与title平级的数据，比如说：{"title":"中国卫星","imgUrl":"https://gimg3.baidu.png","link":"https://xxxxxxxx"}

bannerWidth：轮播图的宽度，String类型，例如 '100px' ,'100rpx', '100vw'等

bannerHeight：轮播图高度，类型如上

bannerInterval：滑动动画时长，Number类型， 单位毫秒，默认5秒

bannerDuration：banner 滑动动画时长，Number类型，单位毫秒，默认500毫秒  （app-nvue不支持）

bannerAutoPlay： banner是否自动切换， Boolean类型， 默认true

bannerCircular：banner是否才用衔接滑动（即播放到末尾后重新回到开头），Boolean类型，默认true

bannerVertical：banner滑动方向是否为纵向，Boolean类型，默认false

bannerPreviousMargin：banner前边距（可用于露出前一项的一小部分，接受 px 和 rpx 值），String类型，默认没有为'0px'，（app-nvue、字节跳动小程序、飞书小程序不支持）

bannerNextMargin：banner后边距 (可用于露出前一项的一小部分，接受 px 和 rpx 值），String类型，默认没有为'0px‘，（app-nvue、字节跳动小程序、飞书小程序不支持）

事件

onBannerClick：banner的条目点击事件,接收到的值为当前所处的位置index，类型Number

使用方法：

然后以上属性可以按需修改

具体代码:

子组件banner

父组件使用

遗留问题

有两个问题没解决，

1：就是滑动或者是点击底部title-view，不会生效的问题，原因是title-view和swiper这两个组件是平级关系:。

2：就是当轮播图不显示或者滑动到其他页面不显示在前台时（组件是没有onShow和onHide生命周期的），这时候要关闭自动轮播，然后显示的时候再打开自动轮播。

后续的话会再看怎么去解决，如果已经解决的同学欢迎评论区留言。

遗留问题解决

第2个问题解决方法：使用vuex全局变量，然后废除上面的自定义属性bannerAutoPlay，使用全局的变量，在banner所属页面的生命周期方法onShow和onHide中去修改这个值，最后在banner组件中取得这个值来赋值给autoplay属性。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！