文档地址:https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/
结合vue的学习:https://zhuanlan.zhihu.com/p/27407024
作者成品:http://ustbhuangyi.com/sell/#/goods

一.使用

代码是使用vue-cli的项目
html

<div class="wrapper" ref="wrapper"><ul class="content" ref="content"><li v-for="(item,key) in detail" :key="key" v-if="detail.length > 0"><Row type="flex" justify="start" align="middle"><Col :span="8" class="detail-item"><span :class="{'color-red':item.is_delay === 1}">{{item.order_sn}}</span></Col><Col :span="8" class="detail-item"><span>{{item.date}}</span></Col><Col :span="8" class="detail-item"><span>￥ {{item.partner_profit  | number2}}</span></Col></Row></li><li v-if="!scrollFinish"><Row type="flex" justify="center" align="middle"><Col :span="6" v-if="loadingText"><p>{{loadingText}}</p></Col><Col :span="2" v-else><Spin size="large"></Spin></Col></Row></li></ul></div>

mounted() {// 设置wrapper的高度this.$refs.wrapper.style.height = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop + "px";// better-scroll 的content高度不大于wrapper高度就不能滚动,这里的问题是,当一页数据的高度不够srapper的高度的时候,即使存在n页也不能下拉// 需要设置content的min-height大于wrapper高度this.$refs.content.style.minHeight = this.$refs.wrapper.offsetHeight + 1 + "px";this._initScroll();this.getIncomeDetail(this.nextPage);// 设置scroll的高度// this.scrollHeight = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop ;},
methods:{_initScroll() {this.orderScroll = new BScroll(this.$refs.wrapper, {probeType: 3,    click:true,pullUpLoad: {   // 配置上啦加载threshold: -80   //上啦80px的时候加载},mouseWheel: {    // pc端同样能滑动speed: 20,invert: false},useTransition:false,  // 防止iphone微信滑动卡顿});// 上拉加载数据this.orderScroll.on('pullingUp',()=>{this.scrollFinish = false;// 防止一次上拉触发两次事件,不要在ajax的请求数据完成事件中调用下面的finish方法,否则有可能一次上拉触发两次上拉事件this.orderScroll.finishPullUp();// 加载数据this.getIncomeDetail(this.nextPage);});}
}

二.注意

https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#滚动原理
这里官网的明确说明
当 content 的高度不超过父容器的高度，是不能滚动的
当 content 的高度不超过父容器的高度，是不能滚动的
当 content 的高度不超过父容器的高度，是不能滚动的
所以上文中要有代如下:

// 设置content的高度比wrapper的高度大1px
this.$refs.content.style.minHeight = this.$refs.wrapper.offsetHeight + 1 + "px";

三. 上拉加载下拉刷新中注意

上拉加载和下拉刷新后要调用响应的finishPullUp和finishPullDown,然后在调用refresh
上拉加载下拉刷新当从本地获取数据时,因为很快,所以不会出现问题
但是, 当从服务器获取数据的时候,调用finishPullUp和finishPullDown和finish的时机很重要,应该在加载完数据的$nextTick中调用,否则会出现下拉问题

四.其他的请看文档即可

better-scroll使用相关推荐

extjs中滚动条属性_十分钟快速了解 JS 中的 offset、scroll、client
(给前端大全加星标,提升前端技能) 作者:前端下午茶公号 / SHERlocked93 在下开发中经常碰到 offset.scroll.client 这几个关键字,比如 offsetLeft.of ...
react取消监听scroll事件
如果要移除事件addEventListener的执行函数必须使用外部函数而不能直接使用匿名函数错误写法: // 这样写是移除不了滚动事件的 componentDidMount() {// 添加滚动监 ...
jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
转载自:老驴的博客 jQuery脚本: 1 <script type="text/javascript">2$(function() {3 var scrollDiv ...
javascript + css 利用div的scroll属性让TAB动感十足
做了一个动感十足的TAB不敢独占,写出来大家共享,大家可以到宝宝孕历首页看看效果. 其实现是通过js控制div的scrollLeft属性来实现的,tab分成两个部分tab头部分和tab体部分,tab体 ...
31 元素滚动scroll系列
技术交流 QQ 群:1027579432,欢迎你的加入! 1.元素 scroll 系列属性使用 scroll 系列的相关属性可以动态的得到该元素的大小.滚动距离等. 2.页面被卷去的头部如果浏览器 ...
搜索页面scroll下拉时候进行刷新，显示更多搜索值
1.封装扩展scroll.vue功能: 1 //props传值 pullup:{ 2 type:Boolean, 3 default:false 4 } 5 6 7 _initScroll(){ 8 ...
[转]用 jQuery 实现页面滚动（Scroll）效果的完美方法
转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...
scroll事件实现监控滚动条并分页显示示例（zepto.js）
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
如何在Storyboard中使用Scroll view
本文章环境Xcode 11 在开始使用scroll view之前(storyboard/XIB),我们必须搞清楚两个东西在Storybord/Xib中使用Scroll view,会有哪些结构为什么 ...

better-scroll使用

一.使用

二.注意

三. 上拉加载下拉刷新中注意

四.其他的请看文档即可

better-scroll使用相关推荐

最新文章

热门文章