better-scroll插件 api
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的更多相关文章
- 开发自己的One Page Scroll插件(二)
开发自己的One Page Scroll插件(一) 5. 在其他浏览器中的特性 我经常会不停地发布当前的版本,从而可以在GitHub上得到不断的反馈.我的开发模式是不断的迭代.在开始的时候,我不会太关 ...
- niceScroll 简单使用 及 插件API
官方网址[https://nicescroll.areaaperta.com/] 注:效果见官网右侧滚动条 jquery.nicescroll文件下载地址 引入核心文件,插件需要引入1.5.X以上版 ...
- vue-scroller的使用 && 开发自己的 scroll 插件
vue-scroller的使用 在spa开发过程中,难免会遇到使用scroll的情况,比如下面的: 即,当用户选择好商品之后,点击购物车,就会有一个购物车弹窗,如果选择的商品小于三个,刚好合适,如果多 ...
- VuePress教程之深入理解插件API
VuePress教程之深入理解插件API 本文目录 1 VuePress教程之深入理解插件API 2 插件 ??? 2.1 暖暖身 2.2 插件如何运作 3 准备 3.1 Markdown 3.2 P ...
- fullPage.js全屏滚动插件API
API sectionsColor:['green','orange','red','lime']; //设置背景颜色 可以为每一个section设置background-color属性 contro ...
- MUI - Scroll插件的使用
http://dev.dcloud.net.cn/mui/ui/#scroll 神坑1:如果在vuejs中使用,那么需要配合mui.ready(function(){}) 才能找到dom对象,具体de ...
- gchart 插件API
data: 一个二维数组,参数类型如下:[[, , ], [, , ], [, , ]] size: 图片显示的大小 ( width x height ) 300x200 type: 前面已经说过了 ...
- 学习笔记6——插件 API,“过滤器”(Filters)和“动作”(Actions)
WordPress 中有一种叫执行挂勾的机制,允许插件把一些功能“挂载”到 WordPress 当中.也就是说,在系统运行至某一个环节时,去调用插件内的一些函数.执行挂勾分为两种: 动作 (Actio ...
- jtable插件api
官网2016-03-15 事例图: 一.客户端配置 1. paging boolean default:false 配置是否分页,果断改为true. 2. pageList string defaul ...
随机推荐
- Linux系统编程—信号量
大家知道,互斥锁可以用于线程间同步,但是,每次只能有一个线程抢到互斥锁,这样限制了程序的并发行.如果我们希望允许多个线程同时访问同一个资源,那么使用互斥锁是没有办法实现的,只能互斥锁会将整个共享资源锁 ...
- jwt攻击手段
jwt 秘钥泄漏/敏感文件泄漏 在一些配置文件被我们可查的情况下,包括各种文件读取,源码泄漏,此时伪造身份就变得很容易了. 空加密算法 对于明文的加密算法通常为HS256,在jwt中分为三个部分,以点 ...
- Python-全局解释器锁GIL原理和多线程产生原因与原理-多线程通信机制
GIL 全局解释器锁,这个锁是个粗粒度的锁,解释器层面上的锁,为了保证线程安全,同一时刻只允许一个线程执行,但这个锁并不能保存线程安全,因为GIL会释放掉的并且切换到另外一个线程上,不会完全占用,依据 ...
- (leetcode每日打卡)秋叶收藏集【动态规划】
LCP 19.秋叶收藏集 题目链接 算法 动态规划 时间复杂度O(n) 1.题目要求最终形成[红.黄.红]三部分,每部分数量可以不相等,问最终调整操作数量最小是多少.这道题一开始考虑暴力去做,枚举两个 ...
- USB虚拟串口 使用基于stm32的RT-Thread
参考我的RT Thread论坛文章 https://www.rt-thread.org/qa/thread-422644-1-1.html
- SpringCloud Alibaba系列(三) Sentinel热点参数限流
愿你生命中有够多的云翳,造就一个美好的黄昏 欢迎关注公众号[渣男小四],一个喜欢技术更喜欢艺术的青年 一.介绍 热点即经常访问的数据.很多时候我们希望统计某个热点数据中访问频次最高的 Top K 数据 ...
- Lane-Detection 近期车道线检测论文阅读总结
近期阅读的几篇关于车道线检测的论文总结. 1. 车道线检测任务需求分析 1.1 问题分析 针对车道线检测任务,需要明确的问题包括: (1)如何对车道线建模,即用什么方式来表示车道线. 从应用的角度来说 ...
- redis 开启AOF
找到redis 安装目录 例如 cd /usr/local/redis 打开 redis.conf 修改以下参数: # vi /usr/local/redis/etc/redis.conf appe ...
- 手把手教你AspNetCore WebApi:缓存(MemoryCache和Redis)
前言 这几天小明又有烦恼了,系统上线一段时间后,系统性能出现了问题,马老板很生气,叫小明一定要解决这个问题.性能问题一般用什么来解决呢?小明第一时间想到了缓存. 什么是缓存 缓存是实际工作中非常常用的 ...
- localStorage使用小结
一.什么是localStorage.sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题 ...