时间:2021-05-26
根据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>可参考官方文档:https://github.com/ustbhuangyi/better-scroll/blob/master/example/components/slide/slide.vue
总结
以上所述是小编给大家介绍的vue-music 使用better-scroll遇到轮播图不能自动轮播问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了vue滚动插件better-scroll的具体代码,供大家参考,具体内容如下1.概述1.1说明better-scroll是一款重点解决移动端
制作轮播图时,一般都会有自动轮播和自动轮播间隔时间的设定,这是简单的轮播图效果,而制作进度条轮播效果,需要用到swiper3的api来使用,进度条走满的时间是跟
整理以前用jQuery实现的图片轮播效果。1.不做操作时,自动轮播2.鼠标悬浮在图片上时,停止自动轮播,隐藏在图片左右的箭头会显示出来3.手动轮播1:鼠标指向图
接手一个项目,有一个问题需要修改:轮播图不能手动滑动,手动滑动轮播图只会触发侧滑菜单。猜测:viewpager控件(轮播图)的触摸事件被SlidingMenu控
一.实现原理(1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏;(2)轮播图分为手动轮播和自动轮播;手动轮播的重点是每次点击