chjtx / jroll Goto Github PK
View Code? Open in Web Editor NEWSmooth scrolling for the mobile web
Home Page: http://www.chjtx.com/JRoll/
License: MIT License
Smooth scrolling for the mobile web
Home Page: http://www.chjtx.com/JRoll/
License: MIT License
你好,最近在使用您开发的JRoll下拉插件,首先感谢你开发这个插件,确实比iscroll好用。
在此给您提一个bug,也算尽绵薄之力。
bug:在无限加载插件中,如果我向下滑动的过程中,突然向上滑动。插件会直接滚动到最下面,并出现一个大面积的空白页面。在您的官方文档中也有这个现象,是否可以在执行滑动任务前,插件判断下最大的滑动距离。从而避免这种现象?
请教 如果我在上拉加载的第三页进入二级列表页面,之后返回一级列表,
如何使列表初始化在加载3次的状态啊?
runjs 地址:http://runjs.cn/detail/5gl4mw14
如果Tab1滚动条拖到最后还在回弹的时候,再点击Tab2,那么它就会停在Tab1的滚动位置里,而不会执行jroll.scrollTo(0,0)
请问这个有没有什么解决方法?
禁止回弹开启后无法滑动
var jroll = new JRoll("#wrapper", {
scrollX: true,
scrollY: false
});
jroll.options.bounce = false;
开启后可以
嵌套使用,父元素为上下滑动,子元素为左右滑动,这时有个需求是焦点在子元素时向上滑或向下滑,希望是触发父元素的上下滑动,但是动不了,因为这时的焦点在子元素上,这个需求需要如何处理
new JRollViewer('.viewer0')
new JRollViewer('.viewer1')
实例化后第一个能容器的图片能正常滑动,第二个就不行,而且发出警告为;
Unable to preventDefault inside passive event listener due to target being treated as passive
#demo地址
https://git.coding.net/lamber0808/viewer.git
JRoll-master/plugins/jroll-viewer/2.html
帮忙看看什么问题,谢谢;
非常棒的 code。
近期在使用时遇到这样的问题:
在触摸屏电脑上,windows 系统, JRoll 就判断非移动设备,只能 mouse 不能 touch。
希望能支持初始化参数设置当前是侦听 mouse 还是 touch
用jroll做表格滚动时 因为dom节点非常多 滑动很卡 怎么破
JRoll报错代码:
me.scroller = options && options.scroller ? (typeof options.scroller === 'string' ? document.querySelector(options.scroller) : options.scroller) : me.wrapper.children[0]
me.wrapper.children[0]找不到。
我的HTML结构:
<div id="wrapper" style={{height: "100vh"}}>
<ul id="scroller">
</ul>
</div>
momentum为true,当我想做滑动吸附的时候 判断滚动方向然后直接scrollTo一个位置 会出现闪烁一下的问题
1、jroll.infinite这个函数,初始化的时候会自动执行一次吗?能取消自动执行吗?
2、为何执行下拉刷新的时候也会走一次jroll.infinite?
3、能否配合angular使用?我在scroller里面使用了angular-ngrepeat,如果在只加入jroll.pulldown的情况下,请求了angular数据后然后执行apply,再执行jroll.refresh数据是可以出现。至于同时加入pulldown和infinite的话,则angular数据无法显示,估计是infinite的template参数会覆盖掉scroller里面的html标签,这个有解吗?
当前页面已经 加载多页数据的时候,此时由于外部原因,导致页面数据发生变化,数据量减少的时候,jroll的高度怎么才能实时变化呢?现在碰到的情况是,组件不能自动滑动到有数据的位置,显示大量空白,需要自己手动上滑到 有数据的位置才能看到数据,此种情况改如何解决呢?
你好,我在使用时发现一个错误
Uncaught TypeError: Cannot set property 'endX' of undefined
at JRoll._endAction (eval at <anonymous> (app.js:1051), <anonymous>:709:18)
at JRoll._step (eval at <anonymous> (app.js:1051), <anonymous>:809:12)
如果滚动停止 不会报错
就是能滑动,然后放手后,立刻回弹到了起始的位置。
目前只在iphone发现了这个问题。
是不是iPhone端的触摸事件不同导致的?
Error: Cannot find module 'express'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (C:\Users\Administrator\JRoll\server.js:1:77)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
作者你好,用你的jroll 模拟了下下拉刷新,但是在做下拉刷新动画的时候,下拉回弹的距离无法监听,这让让人很头疼,有解决的方案吗
如题,如果是不用这个控件,右键可以复制,用了之后,就不能用了。怎么能解决呢?
jroll.y = jroll.maxScrollY
这样似乎没有效果
可以做一个类似天猫的 上拉加载商品详情 下拉返回商品介绍的demo吗?
自己试用了下 没做成功, 只完成了上拉加载商品详情 , 然后不知道怎么把弹性边界限定在这个div.
下拉后再返回
您好,首先你的scroll要比iScroll好用多了,这是肯定的,不过我还是遇到了一个问题,就是在向下滑动并且松开手指的时候,此时还没有滑动到最底部,但是却自动向上反弹了,而且还是反弹到最顶部。这是为什么啊?
要拖动很大距离才能滑动,类似PhotoSwipe这么流畅就好了、
作者您好,目前使用 jroll-vue-infinite 发现有点不太适合,感觉该插件的使用方式与vue官方推荐的集成方式出入太大,且不方便。比如组件初始化(网络环境无法上传截图至github):
'jroll-infinite': JRoll.VueInfinite({ bottomed() { var me = this; this.tip = '没有更多数据啦!' //if (me.page === 0) { this.productList.concat([1, 2, 3, 4, 5]) me.success() }, updated() { console.log('current page is ' + this.page) } })
而您的回调函数 bottomed 中我无法获取我当前组件的变量,我看您的项目中也没有SPA这块的案例,能否提供相应的案例给出参考?
我的页面是通过vue动态加载弄出来的 我在加载完毕之后调用了你的 refresh但是还是现实不全 请问怎么解决 我用的是最新版本
我打印了数据如下 其中 #main 为内容容器
console.log(
输出为 2025 2025 2025 1334
jroll-vue-infinite.js 加载所有数据后刷新,底部提示信息不正确
请在后面加一点内容(修改成这样):
watch: {
page: function (p) {
if (p === this.total) {
this.tip = options.completeTip || '已全部加载完成'
}else if(p < this.total){
this.tip = options.tip
}
}
}
请问在在滑动中,我能停止滑动么
上拉时手松开回到原处,这是为什么啊
我都页面的滚动区域中间位置设置了一排三个 分类显示按钮 当点击按钮的时候 我执行了scrollTo方法到这个位置 没问题 但是当 我把页面 滑动一下再点击这个按钮滚动就乱跳了开始 有什么思路吗?我scrollto到的是按钮那一排div的.offset().top这个值
scroll事件似乎不会在回弹的时候触发
Chrome 56 的 Warning 神烦啊,请问什么时候会把 2.4.5 提交到 npm 呢?
华为Honor型号是CHM-CL00,浏览器UC。但系统浏览器可以。
随后我让公司同事帮测,三星。红米。oppo及其他杂牌机也可以。不知道华为那个是不是特例。
当scroller的行数量多起来后,在上下滑动的途中,再上下滑动时,会瞬间回到顶部/底部
官网上的demo也存在同样的问题
解决方案:
在子jroll对象的scrollStart事件中,给父jroll对象的moving设值为false,就ok了
j.on("scrollStart", function(e) { jroll.moving=false;}
希望作者能解决下这个bug
请问用 防QQ列表 for 方式,将删除换成一个展开更多形式的按钮,高度改变了,要怎样进行.refresh();
谢谢!~~~
你好,现有一个需求如下:需要记录当前滑动页面的位置,在下次进入该页面或者切换回该页面时读取上次的浏览位置。这就需要在离开该页面时记录wrapper的滚动条位置,然后下次进入时读取记录的位置数据,moveTo到指定位置。jroll现有的api属性和方法能够办到吗
能不能搞个精简版的,动不动就20-30KB,对应手机端感觉还是大了一点,手机端也不需要太过复杂的功能,这个可以用来做手机端日期控件与下拉无限加载,希望能精简一个10几KB的版本,这个很有用,谢谢!如果每个控件都20-30KB,如果一个手机端的页面需要4-5个这样的控件,整体下来JS也是一个庞大体积的,对于手机端来说很是不划算的!
1.传递图片链接,打开单张图片.的功能. 例如
var viewer=new JRollViewer({zoomMax:3,JRoll:window.JRoll});
viewer.show("https://cloud.githubusercontent.com/assets/5227840/25881705/11d43ef6-3571-11e7-9995-62924c3c1c03.png");
这种功能一般在那种动态创建图片的时候,会用到.打开单张图片的情况.
忘记了是什么问题了,好久以前发现的,自己改了代码,不知道github上有repo。
现在把代码位置贴上来,希望能有些帮助:
jroll-infinite.js中
function callback(data)函数
html += options.total === me.options.page ? options.completeTip : options.loadingTip;
改为
html += data.length == 0 ? options.completeTip : options.loadingTip;
好像是解决滑动的时候加载失败,但是计数却增加了的问题。改为以目前实际加载数量为准。
另外pages计数好像有逻辑问题。
ps:挺好的一个控件,希望能够一起贡献下
在scroll组件中,最后一个滚动对象添加内容是一张图片,然后长按图片无法识别,如果单独将图片拿出来不放入组件中则可以识别,请问下,是不是框架中阻止了长按屏幕的响应
能否做成缓动的?减速的那种。准备把你的滚动插件集成到我的一个开源项目中。
上拉加载中,demo是否考虑加上全部数据加载完成时代码的调用
提错了,抱歉
一个页面存在多个图片查看器的时候,每一个图片查看器的容器的类名为.view,然后new JRollViewer('.viewr'),第一个列表图片能预览,但是第二就不能;
JRoll得功能挺强大得,想在Vue项目中使用,但是看了vue得DEMO 在单页面应用中这样操作起来比较麻烦啊。希望作者能提供一个组件化得方式,类似与vue-infinite-loading。
我在react的componentDidMount()做new JRoll()处理,第一次加载列表的时候,可以触摸滚动。
但是,当我跳转到其他页面再返回来的时候,触摸滑动就无效了,我打印了new JRoll,显示已经实例化成功,并没有任何错误提示。
我想知道触摸滚动是如何触发?
你好,无限加载我看到demo是用到了模板引擎。我用的是vue,能不能像下拉刷新那样,只是提供一个方法去触发我自己的分页加载事件,最后我自己处理完了,再refresh高度就好了,不需要模板引擎。
希望增加 衰减系数参数deceleration 灵活调节衰减系数,提高体验,接近原生app的回弹效果
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.