VUEJS滚动插件BetterScroll使用时 无法滚动,但是已经捕获 demo
2017-04-21 15:07
786 查看
最近用了BetterScroll仿照别人的源码开发个小东西玩遇到了问题,和群里�� S_m1n9、讨论了下:
这个比较坑爹。有几点你需要注意:
1. 你的父级容器 也就是 捕获的 demo 要有个有 overflow:hidden 和具体宽度/高度;子容器也要有宽度是你所有素材的宽度/高度熟悉他的工原理的童鞋应该明白。。这玩意就是通过transform来 做动画 移动显示的:
2. 确定你是想垂直(上下)滚动还是想左右滚动:
1.上下滚动你需要把容器 上图 ul 的 高度定死也就是如 : height: 100px
2. 如果是水平(左右)滚动,你就得吧 width 宽度给定死,如:width: 100px
姑且上传个 上下的图:
如上图所示:我我写的是上下垂直滚动的,而见他源码。由于 他这个源码里写的是 你容器.children[0],容器的第一个子元素是最终容器 所以我这里是ul给个高度就好了。
最后,给新手个个小提示吧:不想给死数据的,可以用这个方法 --
注意 有时候 高度宽度 最终容器 ul 是 能获取高度/宽度不用给定,但是有时候 无法滚动 你就要自己指定了。。还是有些不大智能啊
这个比较坑爹。有几点你需要注意:
1. 你的父级容器 也就是 捕获的 demo 要有个有 overflow:hidden 和具体宽度/高度;子容器也要有宽度是你所有素材的宽度/高度熟悉他的工原理的童鞋应该明白。。这玩意就是通过transform来 做动画 移动显示的:
2. 确定你是想垂直(上下)滚动还是想左右滚动:
1.上下滚动你需要把容器 上图 ul 的 高度定死也就是如 : height: 100px
2. 如果是水平(左右)滚动,你就得吧 width 宽度给定死,如:width: 100px
姑且上传个 上下的图:
如上图所示:我我写的是上下垂直滚动的,而见他源码。由于 他这个源码里写的是 你容器.children[0],容器的第一个子元素是最终容器 所以我这里是ul给个高度就好了。
最后,给新手个个小提示吧:不想给死数据的,可以用这个方法 --
注意 有时候 高度宽度 最终容器 ul 是 能获取高度/宽度不用给定,但是有时候 无法滚动 你就要自己指定了。。还是有些不大智能啊
this.$refs['XXXXXdemo'].style.height = 数据.lenght + 'px'; // 一定别掉了最后的px
相关文章推荐
- 使用better-scroll时遇到已初始化但是页面无法滚动和点击的情况
- vue 中使用better-scroll插件时无法滚动问题
- vue2项目中better-scroll 插件使用时候页面不滚动
- vue滚动轴插件better-scroll使用详解
- 滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo
- Myeclipse中文件已经上传到服务器目录下,文件也没有被占用,但是页面中无法读取和使用问题的解决方法
- better-scroll滑动插件的使用
- better-scroll插件使用
- 【无限滚动加载数据】—infinite-scroll插件的使用---------下拉加载数据、无线滚动
- vue中使用better-scroll做横向滚动注意事项
- better-scroll插件使用
- better-scroll无法滚动的问题
- better-scroll插件初使用
- 在ubuntu-kylin14.10下,无法使用apt-get工具( libc6-i386 : 依赖: libc6 (= 2.15-0ubuntu10.5) 但是 2.19-0ubuntu6 已经安)
- vue三级界面使用better-scroll滚动
- Angular中使用better-scroll插件的方法
- jquery滚动条插件slimScroll的使用方法总结
- 【无限滚动加载数据】—infinite-scroll插件的使用
- infinite-scroll插件无限滚动加载数据的使用
- better-scroll插件初使用