标签:scrollto 内容 参数配置 研究 cto init console pos import
源码:https://github.com/LY-u/vue_better-scroll 封装scroll.vue组件, 在组件内加载: import BScroll from ‘better-scroll‘ 组件内容:参考:https://github.com/LY-u/vue_better-scroll/blob/master/src/components/page.vue 封装好的scroll.vue在项目中使用: import BScroll from ‘better-scroll‘ import scroll from ‘@/components/scroll‘ 注意事项:先引入better-scroll 组件 在引入scroll,期中BScroll组件不要再模板里调用 components:{scroll} APP.vue使用 scroll组件 <scroll class="wrap" ref=‘scrollEle‘ :pulldown="true" :listenScroll=‘true‘ :pullDownRefresh="pullDownRefreshObj" @pulldown="loadData" @scroll=‘scroll‘></scroll> <script> export default{ computed:{ pullDownRefreshObj(){ // 下拉刷新配置 return { threshold: 60, stop: 50, stopTime:1000 } }, }, //这里具体参数配置 参考官方文档 http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/api-specific.html 具体我也不太明白,我也是参考这里一步一步写的, methods:{ loadData(){ setTimeout(()=>{ this.finishPullDown().then(res=>{ console.log(‘refresh‘) }) },1000) }, scroll(pos){ //监听滚动 let y = -pos.y // alert(y) }, scrollTo(y) { return new Promise((resolve)=>{ this.$refs.scrollEle.scrollTo(0, -y, 500, ‘bounce‘) resolve() }) }, scrollToElement(){ let el = document.querySelector(‘.to‘) this.$refs.scrollEle.scrollToElement(el,700) }, finishPullDown() { return this.$refs.scrollEle.finishPullDown() }, initScroll() { let s = this.$refs.scrollEle.scroll if(s){ return this.refreshScroll() }else{ return this.$refs.scrollEle._initScroll() } }, refreshScroll() { return this.$refs.scrollEle.refresh() }, }, }, mounted() { //初始化滚动条 this.initScroll() }, } </script> <style> .wrap{ //滚动条高度初始化 width: 100%; height: 100%; overflow:hidden; } </style> //写到这里,其实还有一个坑,不能实现滚动,怎么解决了? 终于研究了半天,一个代码一个代码的去参考:https://github.com/LY-u/vue_better-scroll/tree/master/src/components 最终自己也无奈了,解决办法就是在 <scroll class="wrap" ref=‘scrollEle‘ :pulldown="true" :listenScroll=‘true‘ :pullDownRefresh="pullDownRefreshObj" @pulldown="loadData" @scroll=‘scroll‘> <div></div> </scroll> 注意里面的所有数据都要放在div里面 ,然后滚动条就出来了。
标签:scrollto 内容 参数配置 研究 cto init console pos import
原文地址:https://www.cnblogs.com/hxp87/p/9263884.html