Vue中的better-scroll插件

在需要的文件中添加
import BScorll from 'better-scroll';
引用的示例代码:
let scroll = new BScroll(Dom对象, {//options
startX: 0,
startY: 0
}) Vue获得Dom对象方法,
<div v-el:food-wrapper></div>//定义对象
this.$els.foodWrapper//获取对象 (Vue 更新数据时是异步的,所以在数据未加载完全之前,Bscroll无法获取目标内容的高度,所以会导致无法滚动的现象) 为了解决上面的问题,运用Vue的nextTick();
(简单说,因为DOM至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且DOM更新后再执行,要保证在DOM更新以后再执行某一块代码,就必须把这块代码放到下一次事件循环里面,比如setTimeout(fn, 0),这样DOM更新后,就会立即执行这块代码。) // DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})

问题: 
PC页面时,点击不会被 better-scroll阻止事件,初始化,给 better-scroll派发事件,使移动端拥有点击事件,因此切换到PC端时,点击事件会被执行两次,

方法:在点击时,传 $event变量,Better-scroll插件中的 event事件和原生 js的 event有属性上得区别,Better-scroll插件派发的事件时event_constructed为true,原生点击事件是没有这个属性的,

selectMenu(index,event){
if(!event._constructed){//如果不存在这个属性,则不执行下面的函数
return;
}
}

参数说明:

  • startX: 0 开始的X轴位置
  • startY: 0 开始的Y轴位置
  • scrollY: true 滚动方向为 Y 轴
  • scrollX: true 滚动方向为 X 轴
  • click: true 是否派发click事件,通常判断浏览器派发的click还是betterscroll派发的click,可以用event._constructed,若是bs派发的则为true
  • directionLockThreshold: 5
  • momentum: true 当快速滑动时是否开启滑动惯性
  • bounce: true 是否启用回弹动画效果
  • selectedIndex: 0 wheel 为 true 时有效,表示被选中的 wheel 索引
  • rotate: 25 wheel 为 true 时有效,表示被选中的 wheel 每一层的旋转角度
  • wheel: false 该属性是给 picker 组件使用的,普通的列表滚动不需要配置
  • snap: false 该属性是给 slider 组件使用的,普通的列表滚动不需要配置
  • snapLoop: false 是否可以无缝循环轮播
  • snapThreshold: 0.1 用手指滑动时页面可切换的阈值,大于这个阈值可以滑动的下一页
  • snapSpeed: 400, 轮播图切换的动画时间
  • swipeTime: 2500 swipe 持续时间
  • bounceTime: 700 弹力动画持续的毫秒数
  • adjustTime: 400 wheel 为 true 有用,调整停留位置的时间
  • swipeBounceTime: 1200 swipe 回弹 时间
  • deceleration: 0.001 滚动动量减速越大越快,建议不大于0.01
  • momentumLimitTime: 300 符合惯性拖动的最大时间
  • momentumLimitDistance: 15 符合惯性拖动的最小拖动距离
  • resizePolling: 60 重新调整窗口大小时,重新计算better-scroll的时间间隔
  • preventDefault: true 是否阻止默认事件
  • preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件
  • HWCompositing: true 是否启用硬件加速
  • useTransition: true 是否使用CSS3的Transition属性
  • useTransform: true 是否使用CSS3的Transform属性
  • probeType: 1 滚动的时候会派发scroll事件,会截流。2滚动的时候实时派发scroll事件,不会截流。 3除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件

Events 事件

let scroll = new BScroll(document.getElementById('wrapper'),{
probeType: 3
}) scroll.on('scroll', (pos) => {
console.log(pos.x + '~' + posx.y)
...
})

Events 列表

  • beforeScrollStart 滚动开始之前触发
  • scrollStart 滚动开始时触发
  • scroll 滚动时触发
  • scrollCancel 取消滚动时触发
  • scrollEnd 滚动结束时触发
  • flick
  • refresh
  • destroy 销毁better-scroll实例时触发

派发滚动

let scroll = new BScroll(document.getElementById('wrapper'))
scroll.scrollTo(0, 500)
...

-----------------------------------

1、vue2 中如何使用 better-scroll

首先安装better-scroll,然后在配置文件中查看

"dependencies": {
"vue": "^2.2.6",
"vue-router": "^2.3.1",
"vue-resource": "^1.3.3",
"better-scroll": "^0.1.7"
},

然后在要用的地方引用这个组件

import BScroll from 'better-scroll';

接下来初始化这个组件,在methods 里面将这个写为一个方法

_initScroll () {
this.shopBoxScroll = new BScroll(this.$refs.shopBox, {
// better-scroll 会将点击事件去掉,要在这里开启,同时点击在PC 会被执行两次,要在这里控制
click: true
});
}

然后在函数钩子里面调用这个方法,因为mvvm 框架的数据是一步的所以要在函数周期里面使用

created () {
this.$nextTick(() => {
this._initScroll();
});
},

在页面中要调用的地方

<div class="shop_box" ref="shopBox">

整体为:

<script>
import starT from '../star/star.vue';
import BScroll from 'better-scroll'; export default {
props: {
seller: {
type: Object
}
},
created () {
this.$nextTick(() => {
this._initScroll();
});
this.classMap = ['min', 'discount', 'guarantee', 'invoice', 'special'];
},
methods: {
_initScroll () {
this.shopBoxScroll = new BScroll(this.$refs.shopBox, {
// better-scroll 会将点击事件去掉,要在这里开启,同时点击在PC 会被执行两次,要在这里控制
click: true
});
}
},
components: {
'v-star': starT
}
};
</script>

(总结):1、在 vue2中如何获取dom 结构

在要获取的dom元素上添加

ref="shopBox"
这样在 js 中
$refs.shopBox便可以获取dom 元素。
有时候经常汇报better-scroll 找不到孩子元素原因是:
html 中 ref="" 中间不要用空格尽量用驼峰命名

2、移动端经常会有这种场景

数据是横行滚动的,这个时候也是better-scroll 只不过这回改成横向滚动的就行
this.picScroll = new BScroll(this.$refs.pic_scroll, {
// better-scroll 会将点击事件去掉,要在这里开启,同时点击在PC 会被执行两次,要在这里控制
click: true,
scrollX: true,
eventPassthrough: 'vertical'
});
3、动态DOM使用 better-scroll
  在vue 中如果使用 v-show 控制一个dom的显示隐藏并且这个 dom 中要有 better-scroll 的效果,在v-show 控制显示的地方调用初始化better-scroll的函数便可以,
但是一定要放到this.$nextTick 里面,因为 vue 中 dom都是异步加载。
 // 筛选
chooseScreenShop () {
// tab 高两
this.screenTabtHight = !this.screenTabtHight;
// 去除其它高亮显示
this.classification = false;
this.sortHightLight = false;
// 筛选
if (this.screenTabtHight === true) {
this.screenShopList = true;
this.$nextTick(() => {
this._init();
});
// 其他的隐藏
this.sortShopList = false;
this.classificationBox = false;
} else {
this.screenShopList = false;
}
this.dailog();
},
 

better-scroll插件 api的更多相关文章

  1. 开发自己的One Page Scroll插件(二)

    开发自己的One Page Scroll插件(一) 5. 在其他浏览器中的特性 我经常会不停地发布当前的版本,从而可以在GitHub上得到不断的反馈.我的开发模式是不断的迭代.在开始的时候,我不会太关 ...

  2. niceScroll 简单使用 及 插件API

    官方网址[https://nicescroll.areaaperta.com/]  注:效果见官网右侧滚动条 jquery.nicescroll文件下载地址 引入核心文件,插件需要引入1.5.X以上版 ...

  3. vue-scroller的使用 && 开发自己的 scroll 插件

    vue-scroller的使用 在spa开发过程中,难免会遇到使用scroll的情况,比如下面的: 即,当用户选择好商品之后,点击购物车,就会有一个购物车弹窗,如果选择的商品小于三个,刚好合适,如果多 ...

  4. VuePress教程之深入理解插件API

    VuePress教程之深入理解插件API 本文目录 1 VuePress教程之深入理解插件API 2 插件 ??? 2.1 暖暖身 2.2 插件如何运作 3 准备 3.1 Markdown 3.2 P ...

  5. fullPage.js全屏滚动插件API

    API sectionsColor:['green','orange','red','lime']; //设置背景颜色 可以为每一个section设置background-color属性 contro ...

  6. MUI - Scroll插件的使用

    http://dev.dcloud.net.cn/mui/ui/#scroll 神坑1:如果在vuejs中使用,那么需要配合mui.ready(function(){}) 才能找到dom对象,具体de ...

  7. gchart 插件API

    data: 一个二维数组,参数类型如下:[[, , ], [, , ], [, , ]] size: 图片显示的大小 ( width x height ) 300x200 type: 前面已经说过了 ...

  8. 学习笔记6——插件 API,“过滤器”(Filters)和“动作”(Actions)

    WordPress 中有一种叫执行挂勾的机制,允许插件把一些功能“挂载”到 WordPress 当中.也就是说,在系统运行至某一个环节时,去调用插件内的一些函数.执行挂勾分为两种: 动作 (Actio ...

  9. jtable插件api

    官网2016-03-15 事例图: 一.客户端配置 1. paging boolean default:false 配置是否分页,果断改为true. 2. pageList string defaul ...

随机推荐

  1. Linux系统编程—信号量

    大家知道,互斥锁可以用于线程间同步,但是,每次只能有一个线程抢到互斥锁,这样限制了程序的并发行.如果我们希望允许多个线程同时访问同一个资源,那么使用互斥锁是没有办法实现的,只能互斥锁会将整个共享资源锁 ...

  2. jwt攻击手段

    jwt 秘钥泄漏/敏感文件泄漏 在一些配置文件被我们可查的情况下,包括各种文件读取,源码泄漏,此时伪造身份就变得很容易了. 空加密算法 对于明文的加密算法通常为HS256,在jwt中分为三个部分,以点 ...

  3. Python-全局解释器锁GIL原理和多线程产生原因与原理-多线程通信机制

    GIL 全局解释器锁,这个锁是个粗粒度的锁,解释器层面上的锁,为了保证线程安全,同一时刻只允许一个线程执行,但这个锁并不能保存线程安全,因为GIL会释放掉的并且切换到另外一个线程上,不会完全占用,依据 ...

  4. (leetcode每日打卡)秋叶收藏集【动态规划】

    LCP 19.秋叶收藏集 题目链接 算法 动态规划 时间复杂度O(n) 1.题目要求最终形成[红.黄.红]三部分,每部分数量可以不相等,问最终调整操作数量最小是多少.这道题一开始考虑暴力去做,枚举两个 ...

  5. USB虚拟串口 使用基于stm32的RT-Thread

    参考我的RT Thread论坛文章 https://www.rt-thread.org/qa/thread-422644-1-1.html

  6. SpringCloud Alibaba系列(三) Sentinel热点参数限流

    愿你生命中有够多的云翳,造就一个美好的黄昏 欢迎关注公众号[渣男小四],一个喜欢技术更喜欢艺术的青年 一.介绍 热点即经常访问的数据.很多时候我们希望统计某个热点数据中访问频次最高的 Top K 数据 ...

  7. Lane-Detection 近期车道线检测论文阅读总结

    近期阅读的几篇关于车道线检测的论文总结. 1. 车道线检测任务需求分析 1.1 问题分析 针对车道线检测任务,需要明确的问题包括: (1)如何对车道线建模,即用什么方式来表示车道线. 从应用的角度来说 ...

  8. redis 开启AOF

    找到redis 安装目录 例如 cd /usr/local/redis 打开 redis.conf  修改以下参数: # vi /usr/local/redis/etc/redis.conf appe ...

  9. 手把手教你AspNetCore WebApi:缓存(MemoryCache和Redis)

    前言 这几天小明又有烦恼了,系统上线一段时间后,系统性能出现了问题,马老板很生气,叫小明一定要解决这个问题.性能问题一般用什么来解决呢?小明第一时间想到了缓存. 什么是缓存 缓存是实际工作中非常常用的 ...

  10. localStorage使用小结

    一.什么是localStorage.sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题 ...