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 滚动方向
- click: true 是否启用click事件
- directionLockThreshold: 5
- momentum: true 是否开启动量动画,关闭可以提升效率
- bounce: true 是否启用弹力动画效果,关掉可以加速
- selectedIndex: 0
- rotate: 25
- wheel: false 是否监听鼠标滚轮事件
- snap: false 自动分割容器,用于制作走马灯效果等
- snapLoop: false
- snapThreshold: 0.1
- swipeTime: 2500
- bounceTime: 700 弹力动画持续的毫秒数
- adjustTime: 400
- swipeBounceTime: 1200
- 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属性,否则使用requestAnimationFram代替
- 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(); },
时间: 2024-10-21 10:30:54