vue-music 使用better-scroll遇到轮播图不能自动轮播问题


Posted in Javascript onDecember 03, 2018

根据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遇到轮播图不能自动轮播问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 #Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 #jQuery
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 #Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 #Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 #Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 #Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 #Javascript
You might like
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
JavaScript闭包详解
2015/02/02 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
BootStrap中
2016/12/10 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
python机器学习之随机森林(七)
2018/03/26 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
艺术设计专业个人求职信范文
2013/12/11 职场文书
安全承诺书范文
2014/03/26 职场文书
家长会标语
2014/06/24 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL