导引

封装工具方法如何在组件中使用

封装工具方法

// utils/utils.js let loading=false; /*** * 滑动事件 * @param callback 触底回掉函数 */ const scrollBottom =(callback)=>{ let t=document.documentElement.scrollTop; let h=document.documentElement.clientHeight; let v=document.body.scrollHeight; if(t+h>=v-50&&!loading){ // -50 即是距离底部50px开始执行 回掉函数 可根据需要自己设置 loading=true; callback().then(()=>{ //当前页加载完毕 loading=false; }).catch(()=>{ //没有更多数据了.. loading=true; }) } } /** * 监听滚动事件 * @param callback loading函数 */ const registerAddEventListener=(callback)=>{ window.addEventListener("scroll", scrollBottom.bind(this, callback), false); } /** * 移除监听 */ const removeEventListener=()=>{ window.removeEventListener('scroll', scrollBottom,false); } //导出 export {registerAddEventListener,removeEventListener};

如何在组件中使用

//list.vue <template> <div> <ul> <li v-for="item in list" :key="item.id">{{item}}</li> </ul> </div> </template> <script> //引入 import {registerAddEventListener,removeEventListener} from '../../utils/utils.js' export default { data() { return { list: [] }; }, mounted() { //dom加载完毕 调用工具方法 传入触底后需执行的回调函数 registerAddEventListener(this.loading); }, destroyed() { //组件销毁 移除事件监听 避免打开其他组件页面受影响 removeEventListener(); }, methods: { //ajax 加载list loading() { return new Promise(((resolve,reject)=>{ this.$http.get(`api_url`).then(res=>{ if(res.data.length>0){ this.list=res.data; //赋值 resolve() //还有数据的需要加载 }else{ reject() //没有更多数据了 // do something Toast('到底啦！！！') } }) })) } } }; </script> <style scoped> </style>

在最好的年纪去努力！！