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 相关文章推荐
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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
php 静态变量的初始化
2009/11/15 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
采购部主管岗位职责
2014/01/01 职场文书
检查接待方案
2014/02/27 职场文书
教师党员公开承诺书
2014/03/25 职场文书
安全责任书怎么写
2014/07/28 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
银行催款通知书
2015/04/17 职场文书
法院答辩状格式
2015/05/22 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript