为祖国的复兴而读书您的支持是我继续创作及维护的动力感谢打赏祝您工作顺利生活美满介绍在我们日常的移动端项目开发中处理滚动列表是再常见不过的需求了可以是竖向滚动的列表也可以是横向的用better-scroll可以帮助我们实现这个官方文档better-scroll 是什么better-scroll 是一款重点解决移动端已支持 PC各种滚动场景需求的插件。better-scroll 是基于原生 JS 实现的不依赖任何框架。它编译后的代码大小是 63kb压缩后是 35kbzip 后仅有9kb是一款非常轻量的 JS lib。怎么使用 better-scroll结构例常见的列表滚动divclasswrapperulclasscontentli.../lili.../li.../ul/div以上代码better-scroll 是作用在外层 wrapper 容器上的滚动的部分是 content 元素。加载script srchttps://unpkg.com/better-scroll/dist/bscroll.min.js/script实例化varBScrollnewBScroll(.wrapper);特别注意better-scroll 只处理容器wrapper的第一个子元素content的滚动其它的元素都会被忽略。外盒子设置固定宽或高和属性overflow: hidden;当 content的高度不超过父容器的高度是不能滚动的而它一旦超过了父容器的高度我们就可以滚动了这就是 better-scroll 的滚动原理。绿色部分为 wrapper也就是父容器它会有固定的高度黄色部分为 content它是父容器的第一个子元素它的高度会随着内容的大小而撑高。better-scroll 支持很多参数配置可以在初始化的时候传入第二个参数。比如letscrollnewBScroll(.wrapper,{scrollY:true,click:true})这样就实现了一个纵向可点击的滚动效果。better-scroll 支持的参数非常多可以修改它们去实现更多的特性。通常你可以不改这些参数。APIapi 里面所有的方法和属性都是实例化对象的。on 方法on(type,fn,context)参数type事件名fn回调函数context函数执行的上下文环境默认是this返回值无作用监听当前实例上的自定义事件。如scrollscrollEndpullingUp,pullingDown等示例importBScrollfrombetter-scrollletscrollnewBScroll(.wrapper)functiononScroll(pos){console.log(scroll)}scroll.on(scroll,onscroll)scroll 事件bs.on(“scroll”,function(){})参数{Object} {x, y} 滚动的实时坐标触发时机滚动过程中具体时机取决于选项中的 probeType。probeType 属性作用有时候我们需要知道滚动的位置。类型Number默认值0可选值1、2、3当 probeType 为 1 的时候会非实时屏幕滑动超过一定时间后派发scroll 事件当 probeType 为 2 的时候会在屏幕滑动的过程中实时的派发 scroll 事件当 probeType 为 3 的时候不仅在屏幕滑动的过程中而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值其默认值为 0即不派发 scroll 事件。scrollEnd 事件参数{Object} {x, y} 滚动结束的位置坐标触发时机滚动结束。maxScrollY 属性类型Number作用scroll 最大纵向滚动位置。备注scroll 纵向滚动的位置区间是 0 - maxScrollY并且 maxScrollY 是负值。scrollX 属性类型Boolean默认值: false作用当设置为 true 的时候可以开启横向滚动。备注当设置 eventPassthrough 为 ‘horizontal’ 的时候该配置无效。refresh 方法作用重新计算 better-scroll当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。例scroll.refresh();小栗子上拉加载下拉刷新!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0metahttp-equivX-UA-CompatiblecontentieedgetitleDocument/titlestyle*{margin:0;padding:0;}html, body{width:100%;height:100%;}.wrapper{width:100%;height:100%;overflow:hidden;}.content{border:solid blue 1px;}.pull-down, .pull-up{position:absolute;width:100%;height:50px;line-height:50px;text-align:center;color:#fff;background:#999;}.pull-down{top:-50px;}.pull-up{bottom:-50px;}li{width:100%;height:50px;border:solid red 1px;}/stylescriptsrcjs/bscroll.min.js/scriptscriptwindow.onloadfunction(){varpdocument.querySelector(.pull-down);varupdocument.querySelector(.pull-up);//获取展示内容高度varhp.offsetHeight;//标识当前是否加载完成数据varendDate0;//创建上拉加载的数据vardata[];//循环添加数据for(leti16;i30;i){data.push(列表i)}//实例化better-scrollvarbsnewBScroll(.wrapper,{probeType:2//实时获取滚动坐标位置});//给实例化对象绑定事件方法bs.on(scroll,onScroll);bs.on(scrollEnd,scrollEnd);//滚动结束后执行scrollEndfunctionscrollEnd(){varselectp.getAttribute(select);varselectUpup.getAttribute(select);if(select){// console.log(刷新);//刷新页面location.reload();}if(selectUp){// console.log(加载);loadData();}}//加载数据的构造函数functionloadData(){//splice 返回截取数据修改原数组长度//map//判断数组数据是否为空不为空继续添加节点数据否则提示数据为空if(data.length0){//endDate:数据表示还有endDate0;varnewDatadata.splice(0,5);document.querySelector(.list).innerHTMLnewData.map(function(item){returnliitem/li}).join();bs.refresh();}else{up.innerHTML没有数据了;//endDate:数据表示没有了为空endDate1;}}//获取滚动的实时坐标位置functiononScroll(){//坐标大于提示文字高度后展示相应内容否则内容if(bs.yh){p.innerHTML释放刷新...p.setAttribute(select,true);}else{p.innerHTML下拉刷新p.removeAttribute(select);}//endDate 来判断是否是已经加载完毕if(!endDate){if(bs.y(bs.maxScrollY-h)){up.innerHTML释放加载...;up.setAttribute(select,true);}else{up.innerHTML上拉加载up.removeAttribute(select);}}}}/script/headbodydivclasswrapper!-- 滚动DOM --divclasscontentpclasspull-down下拉刷新/pulclasslistli列表1/lili列表2/lili列表3/lili列表4/lili列表5/lili列表6/lili列表7/lili列表8/lili列表9/lili列表10/lili列表11/lili列表12/lili列表13/lili列表14/lili列表15/li/ulpclasspull-up上拉加载/p/div/div/body/html参考文档http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/api.html结束语文/非凡主力独自漫步在星河夜空中回首永远不曾停留的光年怀念我们一起走过的日子光年载着年华驰骋行空像穿越千年的光芒在遥远的天宇星辰中我寻到了一个水瓶星座二零一三年 - 冬