huxiaoqi567 / xscroll Goto Github PK
View Code? Open in Web Editor NEWA Javascript Scrolling Framework For Mobile Web
Home Page: http://xscroll.github.io/
A Javascript Scrolling Framework For Mobile Web
Home Page: http://xscroll.github.io/
scroll 事件在老的机型上有问题,但在 ios8 和安卓4上触发的频率甚至比 touchmove 更多,也即没什么问题了。所以是否可以用原生的 scroll 事件来做滚动,而不需要再用 touch 事件模拟出滚动的效果来?(拖动、左划/右划这些还是可以基于类似 hammer.js 等手势库来做更方便一点)
build/cm/plugins/pullup.js
_scrollHandler: function(e) {
var self = this,
xscroll = self.xscroll;
if (!self.isLoading && Math.abs(e.scrollTop) + xscroll.height + self.userConfig.height + self.userConfig.bufferHeight >= xscroll.containerHeight + xscroll.boundry._xtop + xscroll.boundry._xbottom) {
self._changeStatus("loading");
}
return self;
}
希望这里的if条件加上Math.abs(e.scrollTop) > 0
是否支持状态文字容器默认情况下是空字符串。
现在如果列表有一条数据,这个状态总是显示,体验不是很好。
或者有什么建议嘛
点击图片缩放总是很不灵敏的感觉,是怎么回事
如何支持嵌套滑动
在mac上用chrome仿真器调试页面时不支持mac原生的二指拖动滚动。
跪求升级
spa应用,非组件实例所在页面resize窗口,出现如下错误
Uncaught TypeError: Cannot read property 'style' of null
原因:
公司要求,将原本使用vux制作的项目,能在微信以外的浏览器中也能打开(包括PC端)
经过添加多个polyfill,基本在ie10+中都没问题了。
现在遇到的问题就是,使用了vux的Scroller的页面,在ie中出现无法滚动问题。在win7系统,ie11下测试了vux的demo,同样如此。
然后继续追踪,发现了这个xscroll,然后测试了xscroll主页提供demo,同样如此,在ie11中无法滚动。
测试环境:
win7 64位系统
浏览器:IE11
测试的地址:http://xscroll.github.io/demos/scroll-y.html
出现问题:
在ie11中,当滚动动画结束后,滚动条没有动,一直在最顶部。而不是期望的滚动到指定位置。
期望:
希望作者大神帮忙解决一下,或者指点一下,出现问题的可能原因,我可以自行尝试修正。
为什么在你的code中,没看到License协议?需要授权才能使用吗?
当我手动滑动的距离大于50px的时候,监听panend调用xscroll.scrollTop('-' + 400, 400, 'ease-in-out')
以后,再次触摸的时候会跳一下,查看源码得知:
if (boundryCheck) { //over top y = y > boundry.top ? bounce ? (y - boundry.top) * PAN_RATE + boundry.top : boundry.top : y; //over bottom y = y < boundry.bottom - containerHeight ? bounce ? y + (boundry.bottom - containerHeight - y) * PAN_RATE : boundry.bottom - containerHeight : y; //over left x = x > boundry.left ? bounce ? (x - boundry.left) * PAN_RATE + boundry.left : boundry.left : x; //over right x = x < boundry.right - containerWidth ? bounce ? x + (boundry.right - containerWidth - x) * PAN_RATE : boundry.right - containerWidth : x; }
在这里判断有问题。boundry的值是触摸的位置,应该是scrollTop最后的位置,所以导致会跳一下。希望解决,下面是我的代码
` var xscroll = new XScroll({
renderTo:"#dayContainer",
lockY:false,
scrollbarY:false
});
xscroll.render();
xscroll.on('scroll', function (scroll) {
$('.history-cala').css({
opacity: Math.abs(scroll.scrollTop/$('.history-cala').outerHeight(true))
})
})
var startY = 0;
xscroll.on('panend', function (e) {
var top = xscroll.getScrollTop();
var diff = top - startY;
console.log(diff + '...' + top)
if(Math.abs(diff) > 30){
if(diff < 0){
xscroll.scrollTop('-' + $('.history-cala').outerHeight(true), 400, 'ease-in-out')
} else {
xscroll.scrollTop(0, 400, 'ease-in-out')
}
setTimeout(function () {
xscroll.init()
}, 400)
}
})
xscroll.on('panstart', function (e) {
startY = xscroll.getScrollTop()
})`
终于找到这套路,只能 在列表形式的dom内有滚动效果,不是列表的不能再继续滚动。未看源码,不知产生这个问题的原因是什么,像iscroll即使不是列表形式的,会有卡顿但至少使用上还是正常的
上拉加载请求的数据为什么一定要有typ:height的属性,而且如果没有属性,为什么列就会添加影藏属性?
xscroll.destroy()时没有删除xs-fixed-container
当再次new xscroll时,会出现多个xs-fixed-container ,当多次操作时,会导致滑动卡顿
xscroll version: 3.1.2
hammer version: 2.0.7
问题: 滚动会弹回
<scroller class="goods-wrap" lock-x >
...
</scroll>
我是用requirejs把pullup和xscroll两个引进来的
源代码5122行:
_triggerClick: function (e) {
/var target = e.target;
if (!/(SELECT|INPUT|TEXTAREA)/i.test(target.tagName)) {
var ev = document.createEvent('MouseEvents');
ev.initMouseEvent('click', true, true, e.view, 1, target.screenX, target.screenY, target.clientX, target.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, 0, null);
target.dispatchEvent(ev);
}/
var target = e.target;
var srcEvent = e.srcEvent;
if (!/(SELECT|INPUT|TEXTAREA)/i.test(target.tagName)) {
var ev = document.createEvent('MouseEvents');
ev.initMouseEvent('click', true, true, srcEvent.view, 1, srcEvent.screenX, srcEvent.screenY, srcEvent.clientX, srcEvent.clientY, srcEvent.ctrlKey, srcEvent.altKey, srcEvent.shiftKey, srcEvent.metaKey, 0, null);
target.dispatchEvent(ev);
}
}
我在使用xscroll 制作内容左右滚动 的时候,发现无法通过上下滑动触发body的滚动。
我查看了文档,没有发现相关的描述。我希望水平滑动可以触发xscroll,而垂直滑动可以触发body滚动。不知道是不是我的配置有问题。
希望能提供一点思路帮我实现这个功能,非常感谢作者对xscoll的辛苦付出和开源。
xscroll.destroy()时没有删除xs-fixed-container
当再次new xscroll时,会出现多个xs-fixed-container ,当多次操作时,会导致滑动卡顿
在vue里面使用,XScroll = require('xscroll');报错
报错如下:
Module build failed: SyntaxError: 'return' outside of function (323:1)
321 | /** ignored by jsdoc **/
322 | else {
> 323 | return Util;
| ^
324 | }
@ ./~/[email protected]@xscroll/src/xscroll.js 5:11-28
./~/[email protected]@xscroll/src/animate.js
Module build failed: SyntaxError: 'return' outside of function (346:1)
344 | /** ignored by jsdoc **/
345 | else {
> 346 | return Animate;
| ^
347 | }
@ ./~/[email protected]@xscroll/src/xscroll.js 8:14-34
./~/[email protected]@xscroll/src/base.js
Module build failed: SyntaxError: 'return' outside of function (66:1)
64 | /** ignored by jsdoc **/
65 | else {
> 66 | return Base;
| ^
67 | }
@ ./~/[email protected]@xscroll/src/xscroll.js 6:11-28
./~/[email protected]@xscroll/src/timer.js
Module build failed: SyntaxError: 'return' outside of function (163:1)
161 | /** ignored by jsdoc **/
162 | else {
> 163 | return Timer;
| ^
164 | }
@ ./~/[email protected]@xscroll/src/xscroll.js 7:12-30
./~/[email protected]@xscroll/src/hammer.js
Module build failed: SyntaxError: 'return' outside of function (2453:4)
2451 | /** ignored by jsdoc **/
2452 | else {
> 2453 | return Hammer;
| ^
2454 | }
@ ./~/[email protected]@xscroll/src/xscroll.js 9:13-32
./~/[email protected]@xscroll/src/origin-scroll.js
Module build failed: SyntaxError: 'return' outside of function (134:4)
132 | /** ignored by jsdoc **/
133 | else {
> 134 | return OriginScroll;
| ^
135 | }
@ ./~/[email protected]@xscroll/src/xscroll.js 11:19-45
./~/[email protected]@xscroll/src/simulate-scroll.js
Module build failed: SyntaxError: 'return' outside of function (696:2)
694 | /** ignored by jsdoc **/
695 | else {
> 696 | return SimuScroll;
| ^
697 | }
是不是可以提供编译后版本呢?
package.json里暴露出编译后的单文件。
Expected behavior
1、一个 list 页面用 xscroll 的 pullup 加载更多内容,没有更多时用事件或方法暂停 pullup 以使其不再响应手势。
2、当 xscroll 中的内容替换后,因为又有了加载更多内容的需要,调用事件或方法重启 pullup 让它重新响应手势。
Actual behavior.
现在第 1 步是用 pullup:done 去掉 pullup。但是这样做不到第 2 步了。我看到 pullup:done 是直接 unplug 了 pullup 插件。
既然大家都是用汉字的,干嘛不给我中文文档,给英文的。我看的慢啊
项目里需要监听滚动事件,但是无论是监听组件的onScroll还是window的,或者是直接监听vux-scroller-uuid和xs-container的,都没有响应,请问怎么样实现这个功能呢
如题。版本号3.1.3
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.