Better-scroll很容易封装成Vue组件

自定义组件结构@better-scroll-vue/index.vuetemplatescriptimportBScrollfrom"@better-scroll/core";exportdefault{//需要引入哪些better-scroll配置选项props:["click","scrollX","scrollY"],data:()=>({options:{//默认BScroll配置}}),mounted(){//初始化this._initOptions()this._initScroll();},updated(){//数据更新时重新计算滑动值this.scroll.refresh();},methods:{_initScroll(){//初始化滚动条const{options}=this;const{wrapper}=this.$refs;if(!this.scroll){//滚动条未初始化时执行（一次性代码）this.$nextTick(()=>{this.scroll=newBScroll(wrapper,options);});}},_initOptions(){//初始化props覆盖数据中的配置const_propsKey=Object.keys(this._props);//过滤值不为空的propsconstprops=_propsKey.reduce((total,key)=>{如果(this._props[key]){total[key]=this._props[key];};返回总数;},{});this.options={...this.options,...props};}}};在父组件中使用test.vue注意：要满足滚动条件，必须有高或宽的固定区域和溢出区域如果是不能滚动不能滚动的现象，我们得搞清楚这个的根本原因。在此之前，我们先了解一下浏览器的滚动原理：每个人都会遇到浏览器的滚动条。当页面内容的高度超过视口的高度时，会出现垂直滚动条；当页面内容的宽度超过视口宽度时，会出现水平滚动条。即当我们的视口无法显示内容时，用户会通过滚动条滚动屏幕来查看剩余的内容。【注】：文档参考官方介绍