vue-music 使用better-scroll遇到轮播图不能自动轮播问题
程序员文章站
2022-05-05 15:47:55
根据vue-music视频中slider组建的使用,当安装新版本的better-scroll,轮播组件,不能正常轮播
这是因为,better-scroll发布新版本之后,...
根据vue-music视频中slider组建的使用,当安装新版本的better-scroll,轮播组件,不能正常轮播
这是因为,better-scroll发布新版本之后,参数设置发生改变
这是旧版本: 组件为slider
<template> <div class="slider" ref="slider"> <div class="slider-group" ref="slidergroup"> <slot> </slot> </div> <div class="dots"> <span class="dot" :class="{active: currentpageindex === index }" v-for="(item, index) in dots" :key="item.id"></span> </div> </div> </template> <script type="text/ecmascript-6"> import { addclass } from "common/js/dom"; import bscroll from "better-scroll"; export default { name: "slider", props: { loop: { type: boolean, default: true }, autoplay: { type: boolean, default: true }, interval: { type: number, default: 4000 } }, data() { return { dots: [], currentpageindex: 0 }; }, mounted() { settimeout(() => { this._setsliderwidth(); this._initdots(); this._initslider(); if (this.autoplay) { this._play(); } }, 20); window.addeventlistener("resize", () => { if (!this.slider) { return; } this._setsliderwidth(true); this.slider.refresh(); }); }, activated() { if (this.autoplay) { this._play(); } }, deactivated() { cleartimeout(this.timer); }, beforedestroy() { cleartimeout(this.timer); }, methods: { _setsliderwidth(isresize) { this.children = this.$refs.slidergroup.children; let width = 0; let sliderwidth = this.$refs.slider.clientwidth; for (let i = 0; i < this.children.length; i++) { let child = this.children[i]; addclass(child, "slider-item"); child.style.width = sliderwidth + "px"; width += sliderwidth; } if (this.loop && !isresize) { width += 2 * sliderwidth; } this.$refs.slidergroup.style.width = width + "px"; }, _initslider() { // better-scroll 对外暴露了一个 bscroll 的类 // vue.js 提供了我们一个获取 dom 对象的接口—— vm.$refs this.slider = new bscroll(this.$refs.slider, { scrollx: true, scrolly: false, momentum: false, snap: true, snaploop: this.loop, snapthreshold: 0.3, snapspeed: 400 }); // 是否派发滚动到底部事件,用于上拉加载 // 切换到下一张的时候派发的事件 this.slider.on("scrollend", () => { let pageindex = this.slider.getcurrentpage().pagex; if (this.loop) { pageindex -= 1; } this.currentpageindex = pageindex; if (this.autoplay) { this._play(); } }); // 是否派发列表滚动开始的事件 this.slider.on("beforescrollstart", () => { if (this.autoplay) { cleartimeout(this.timer); } }); }, _initdots() { this.dots = new array(this.children.length); }, _play() { let pageindex = this.currentpageindex + 1; if (this.loop) { pageindex += 1; } this.timer = settimeout(() => { this.slider.gotopage(pageindex, 0, 400); }, this.interval); } } }; </script> <style scoped lang="stylus" rel="stylesheet/stylus"> @import '~common/stylus/variable'; .slider { min-height: 1px; .slider-group { position: relative; overflow: hidden; white-space: nowrap; .slider-item { float: left; box-sizing: border-box; overflow: hidden; text-align: center; a { display: block; width: 100%; overflow: hidden; text-decoration: none; } img { display: block; width: 100%; } } } .dots { position: absolute; right: 0; left: 0; bottom: 12px; text-align: center; font-size: 0; .dot { display: inline-block; margin: 0 4px; width: 8px; height: 8px; border-radius: 50%; background: $color-text-l; &.active { width: 20px; border-radius: 5px; background: $color-text-ll; } } } } </style>
下面是版本升级之后,做出的变化
<template> <div class="slide" ref="slide"> <div class="slide-group" ref="slidegroup"> <slot> </slot> </div> <div v-if="showdot" class="dots"> <span class="dot" :class="{active: currentpageindex === index }" v-for="(item, index) in dots" :key="index"></span> </div> </div> </template> <script type="text/ecmascript-6"> import { addclass } from "common/js/dom"; import bscroll from "better-scroll"; // const component_name = "slide"; export default { // name: component_name, props: { loop: { type: boolean, default: true }, autoplay: { type: boolean, default: true }, interval: { type: number, default: 4000 }, showdot: { type: boolean, default: true }, click: { type: boolean, default: true }, threshold: { type: number, default: 0.3 }, speed: { type: number, default: 400 } }, data() { return { dots: [], currentpageindex: 0 }; }, mounted() { this.update(); window.addeventlistener("resize", () => { if (!this.slide || !this.slide.enabled) { return; } cleartimeout(this.resizetimer); this.resizetimer = settimeout(() => { if (this.slide.isintransition) { this._onscrollend(); } else { if (this.autoplay) { this._play(); } } this.refresh(); }, 60); }); }, activated() { if (!this.slide) { return; } this.slide.enable(); let pageindex = this.slide.getcurrentpage().pagex; this.slide.gotopage(pageindex, 0, 0); this.currentpageindex = pageindex; if (this.autoplay) { this._play(); } }, deactivated() { this.slide.disable(); cleartimeout(this.timer); }, beforedestroy() { this.slide.disable(); cleartimeout(this.timer); }, methods: { update() { if (this.slide) { this.slide.destroy(); } this.$nexttick(() => { this.init(); }); }, refresh() { this._setslidewidth(true); this.slide.refresh(); }, prev() { this.slide.prev(); }, next() { this.slide.next(); }, init() { cleartimeout(this.timer); this.currentpageindex = 0; this._setslidewidth(); if (this.showdot) { this._initdots(); } this._initslide(); if (this.autoplay) { this._play(); } }, _setslidewidth(isresize) { this.children = this.$refs.slidegroup.children; let width = 0; let slidewidth = this.$refs.slide.clientwidth; for (let i = 0; i < this.children.length; i++) { let child = this.children[i]; addclass(child, "slide-item"); child.style.width = slidewidth + "px"; width += slidewidth; } if (this.loop && !isresize) { width += 2 * slidewidth; } this.$refs.slidegroup.style.width = width + "px"; }, _initslide() { console.log(this.threshold); this.slide = new bscroll(this.$refs.slide, { scrollx: true, scrolly: false, momentum: false, snap: { loop: this.loop, threshold: this.threshold, speed: this.speed }, bounce: false, stoppropagation: true, click: this.click }); this.slide.on("scrollend", this._onscrollend); this.slide.on("touchend", () => { if (this.autoplay) { this._play(); } }); this.slide.on("beforescrollstart", () => { if (this.autoplay) { cleartimeout(this.timer); } }); }, _onscrollend() { let pageindex = this.slide.getcurrentpage().pagex; this.currentpageindex = pageindex; if (this.autoplay) { this._play(); } }, _initdots() { this.dots = new array(this.children.length); }, _play() { cleartimeout(this.timer); this.timer = settimeout(() => { this.slide.next(); }, this.interval); } }, watch: { loop() { this.update(); }, autoplay() { this.update(); }, speed() { this.update(); }, threshold() { this.update(); } } }; </script> <style lang="stylus" rel="stylesheet/stylus"> @import '../../common/stylus/variable'; .slide { min-height: 1px; .slide-group { position: relative; overflow: hidden; white-space: nowrap; .slide-item { float: left; box-sizing: border-box; overflow: hidden; text-align: center; a { display: block; width: 100%; overflow: hidden; text-decoration: none; } img { display: block; width: 100%; } } } .dots { position: absolute; right: 0; left: 0; bottom: 12px; transform: translatez(1px); text-align: center; font-size: 0; .dot { display: inline-block; margin: 0 4px; width: 8px; height: 8px; border-radius: 50%; background: $color-text-l; &.active { width: 20px; border-radius: 5px; background: $color-text-ll; } } } } </style>
可参考官方文档:
总结
以上所述是小编给大家介绍的vue-music 使用better-scroll遇到轮播图不能自动轮播问题,希望对大家有所帮助
上一篇: 五款晒后修护单品,平复紫外线伤害
下一篇: 6招搞定肌肤问题 完美赴约