1 由于BScroll升级 原先的轮播图写法不行了，会报错
image.png
_initSlider(){ //启动better-scroll插件
this.slider=new BScroll(this.$refs.slider,{
scrollX: true,
scrollY: false,
momentum: false,//当快速在屏幕上滑动一段距离的时候，会根据滑动的距离和时间计算出动量，并生成滚动动画。设置为 true 则开启动画。
snap: {
loop: this.loop,//是否开启无缝轮播
threshold: this.threshold,//滑动的距离
speed: this.speed,//滚动速度
interval:4000//轮播间隔
},
bounce: false,//当滚动超过边缘的时候会有一小段回弹动画。设置为 true 则开启
stopPropagation: true,
click: this.click,
pageTurn:true
}),
this.slider.on('scrollEnd', () => { //滚动完毕触发事件index
let pageIndex = this.slider.getCurrentPage().pageX
this.currentPageIndex = pageIndex
if (this.autoPlay) { //无线滚动
// clearTimeout(this.timer)
this._play()
}
})
具体详细写法:
新的写法（loop）
https://github.com/ustbhuangyi/better-scroll/blob/master/example/components/slide/slide.vue
参数地址 博客
https://blog.csdn.net/qq_36416878/article/details/80457378
2父子路由的坑
Bug:自己写出了2个html结构(哭笑)
image.png
解决：
找了很久问了大神才知道 ，是自己写的不规则路由导致 错误代码是这样
image.png
正确的如下
image.png
1 路由配置错误 <router-view>父组件和子组件用了同一个
他渲染通过 router-view 就渲染2个轮播图啊
2 大神原话
> 一般 只是呈现 父组件 直接 调子组件就行了，
如果需要 跳转详情页面的 ，一般就加上 router-view 配合router
