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 相关文章推荐
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
jquery 使用点滴函数代码
May 20 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
Javascript window对象详解
Nov 12 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
浅谈node的事件机制
Oct 09 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 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设置session值和cookies的学习示例
2014/03/21 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
常用jQuery代码分享
2015/07/14 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
python多线程http压力测试脚本
2019/06/25 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
python实现同一局域网下传输图片
2020/03/20 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
员工培训邀请函
2014/01/11 职场文书
外贸英文求职信范文
2015/03/19 职场文书
经理岗位职责范本
2015/04/15 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电