Now I'm working at Zoom Ltd as a web frontend architect.
Welcome follow my WeChat official account!
Languages and Tools:
:scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance
Home Page: https://better-scroll.github.io/docs/en-US/
License: MIT License
看到文档里没有体现,所以问一下,如能把特点写进 README 就好了。
bounceTop:false//代表不开启顶部弹力,就是拉到顶部时候没有弹力,scrollY只能为0
Better-scoll in the sliding process the following error:
。Browser: Google
。Version:56
。Desc:“Unable to preventDefault inside passive event listener due to target being treated as passive.”
如果支持 是哪个参数呢?
最近在看那个外卖app视频学vue,我发现里边的加减按钮的那个组件里边,为了防止在pc端触发两次,里边用event._constructed做了一个判断,如果不是派发的点击事件就直接return掉,但是这样的话,如果这个组件没有用在better-scroll上的话,点击事件没办法触发,没有想到什么好的解决办法,所以我就将preventDefault改为false了,把派发的click事件去掉了,测了测是没有问题的,我想问问您这样做会不会有什么隐藏的隐患,为什么初始化的时候要将默认事件阻止掉,通过派发来实现点击事件(前端小白一枚,问的问题可能不太成熟,您勿怪)
我的better-scroll滚动区域中有input元素,在点击input输入之后就无法失焦了
(用的最新版本的better-scroll -- v 0.1.10 ,, 测试机:只有安卓上有这个问题,ios没问题的)
请问这个能如何解决呢?
在瀑布流每次打开详情页的时候,详情页容器还没等图片加载完就new BScroll(_)导致高度不准确,页面最后面有一些内容滑动不到,希望修复一下,哈哈;
老师,我看了您的饿了么视频。视频里面您在初始化生成一个bs实例后,通过实例是否存在,而选择执行bs.refresh()方法。但是实际上并没有什么效果。但是看你的这个readme文档,上面说的是refresh是一个事件。那应该如何才能执行呢?
如题,试了是undefined,应该有传参合理一点吧
高度或者宽度改变时,怎么做相应的调节啊
当设置 better-scroll 的options click: true 。在scroller 使用checkbox 不能触发默认的选中或者取消事件。demo:
http://47.90.55.218:8081/demo/index.html
浏览器 chrome v: 54.0.2840.59
感谢老师这么好用的插件,提一个issue,当父节点display为none的时候,此时给其子节点绑定BScroll,把父节点display为block后,滚动不生效。必须在父节点display不为none的时候,绑定BScroll才有效。
求解
就是created钩子后
if (!this.homeScroll) {
this.homeScroll = new BScroll(this.$refs.homeWrapper, {
click: true,
probeType: 3
});
} else {
this.homeScroll.refresh();
}
}
@ustbhuangyi 用了better-scroll ,每点一次会以两倍触发 。我的手机和chrome都会有这个现象。
图上 ,三个层都用了 插件。
使用以下代码无效
if (!event._constructed) return;
I have refresh the better-scroll in vue2, but when div'height changed . XXX.scroll.scroller.clientHeight has change, but I can not touch the div bottom. Can you help me , thanks!!
黄老师你好,我现在试用那个wheel:true,设置了之后,点击事件就不能触发,但滚动时,会按li的高度,刚刚到滚动对应的位置。而去掉wheel:true后,点击事件就能触发,现在不知道为什么会出现这种情况,希望有试过的同学看一下,谢谢。现在做的效果就像滴滴打车网页版的,那个时间选择控件一样
<div class="sel-wrapper">
<div class="sel-div" id="sel-div">
<ul>
<li>1座位</li>
<li>2座位</li>
<li>3座位</li>
<li>4座位</li>
<li>5座位</li>
<li>6座位</li>
<li>7座位</li>
<li>8座位</li>
<li onclick="aa(this)">9座位</li>
</ul>
</div>
</div>
<script>
var mySelBscroll = new BScroll(document.getElementById("sel-div"),{
wheel: true, //picker组件要配置
preventDefault: false,
selectedIndex: 3, //默认选中的索引
rotate: 0, //每一层旋转角度
click: true, //可点击
});
$(document).on('click',".my-sel .sel-wrapper .sel-div ul li",function(){
if(!event._constructed){//如果不存在这个属性,则不执行下面的函数
return;
}
console.log('点击了');
mySelBscroll.scrollToElement($(this)[0], 300, 0, -72);
//console.log(mySelBscroll.selectedIndex);
});
<script>
我写了一个div下面是ul li
如题, 这个是常见的需求, 不知道有没有考虑实现呢
使用better-scroll影响Vue2.0的点击事件@click:
问题:scroll容器内的点击事件,在使用了this.$nextTick()的情况下,第1次点击执行1次,第2次点击执行2次,第3次点击执行3次...
加上如下代码:
if(event._constructed){
return;
};
PC端正常,手机端直接失效了。。。
请求一份在React中使用的DEMO
在created函数里new 了Bscroll ,是在nextTick中运行的 但是刷新后无法滚动,把BScroll打印出来发现,刷新后scrollerHeight 的高度和外层容器的高度是一样的,因此无法滚动(实际上内层元素比外层容器要高)。不知道为啥会出现这样的问题,求大大指点
rt
官网例子: https://ustbhuangyi.github.io/better-scroll/city/index.html
滚动到底部,再上拉一次
scroll.on('scroll', function (pos) {
console.log(Math.round(pos.y)); // 会一直不停的执行
});
首先非常感谢老师的better-scroll库,它的表现非常棒!
最近测试了下,发现需要横向滚动的话,option的设置必须为scrollY: false而且scrollX: true.缺一不可.文档中没有明确说明,可能会导致不必要的调试困难.希望这里能给大家提个醒.
#遇到的问题
页面第一次加载进来better-scroll 计算不到图片的高度导致页面拉到一半就卡住了,再刷新一次就正常。(ps:图片是一张高度好大的商品详情图片)
初始化better-scroll 已经是在
mounted () {
this.$nextTick(() => {
this._initScroll();
});}
请问老师有什么办法可以解决吗?谢谢!!!
Bug出现场景:
btnmounted() {
this.initScroll();
},
methods: {
initScroll() {
new BScroll(document.getElementById('box'), {});
},
toggle(){
this.show =! this.show;
}
}
以上代码,使用better-scroll影响v-if、v-show,PC浏览器可以,手机上切换失效
报错信息:
Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted
已经解决:
new BScroll(document.getElementById('user'), {
click:true
});
上拉加载更多分页数据怎么实现?有没有判断往上滑动还是往下滑动的属性或者接口?
我看黄老师你做的效果是写了一个绝对定位的fixed-title ,其余每个列表项滚动的时候与fixed-title的底边接触时就开始改变fixed-title的translateY值。那么我的问题就在这里了在bscroll里判断每个列表组标题与fixed-title是否接壤并开始改变fixed-title的判断条件的具体思路是啥
chrome中调试, initlator 显示行号1328
function click(e) {
var target = e.target;
if (!/(SELECT|INPUT|TEXTAREA)/i.test(target.tagName)) {
var ev = document.createEvent(window.MouseEvent ? 'MouseEvents' : 'Event');
ev.initEvent('click', true, true);
ev._constructed = true;
target.dispatchEvent(ev);
}
};
function momentum(current, start, time, lowerMargin, wrapperSize, options) {
let distance = current - start;
let speed = Math.abs(distance) / time;
let {deceleration, itemHeight, swipeBounceTime, bounceTime} = options;
let duration = options.swipeTime;
let rate = options.wheel ? 4 : 15;
let destination = current + speed / deceleration * (distance < 0 ? -1 : 1);
if (options.wheel && itemHeight) {
destination = Math.round(destination / itemHeight) * itemHeight;
}
if (destination < lowerMargin) {
destination = wrapperSize ? lowerMargin - (wrapperSize / rate * speed) : lowerMargin;
duration = swipeBounceTime - bounceTime;
} else if (destination > 0) {
destination = wrapperSize ? wrapperSize / rate * speed : 0;
duration = swipeBounceTime - bounceTime;
}
return {
destination: Math.round(destination),
duration
};
};
this.$nextTick(() => { if (!this.cScroll) { this.cScroll = new BetterScroll(this.$refs.content, { click: true }); } else { this.cScroll.refresh(); } });
在目标dom有
style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);"
但是无法滚动,不知道什么原因。
Hello, is your better-scroll is not supported by vue.js2.0? I file a report on the wrong, can not find name
当页面刷新时无法滚动,但是若修改JS代码后就可以滚动,请问一下这个怎么解决呢?是否是因为Vue生命周期的问题
我把自己的轮播初始化这部分的代码去掉以后,滚动区域又正常了,这可不可以算是better-scroll与其他第三方轮播插件间的冲突呢?如果有冲突,那要在scroll里使用轮播的话最好用啥插件和better-scroll配合?
var eventType = exports.eventType = {
touchstart: TOUCH_EVENT,
touchmove: TOUCH_EVENT,
touchend: TOUCH_EVENT,
mousedown: MOUSE_EVENT,
mousemove: MOUSE_EVENT,
mouseup: MOUSE_EVENT
};
跟踪了一下,还发现这里少了一些比如 touchcancel 的事件,不知道跟上述问题有没有关系
如果内容的高度没有超过容器高度,就没办法实现内容的弹性滚动,也就无法实现下拉刷新
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.