vue通过自定义指令 实现上拉加载和下拉刷新

自定义指令文件：

image.png

        import Vue from 'vue'

        //自定义scrollerUpdate
        Vue.directive('scrollUpdate', {
            inserted: function(el, binding, vnode, oldVnode) {
                let touchStarY=0, touchEndY=0, touchDistance=0, 
                    pageDownTimer=null, newLiEle=null, updateState=0;
                el.addEventListener('touchstart', async(e) => {
                    touchStarY = e.touches[0].clientY;
                    clearInterval(pageDownTimer);
                })
                el.addEventListener('touchmove', async(e) => {
                    touchEndY = e.touches[0].clientY;
                    touchDistance = touchEndY - touchStarY;
                    //console.log("touch滑动了", touchDistance);
                    
                    let UpdateEle = document.getElementById("downUpdateEle");
                    if(touchDistance < 0){      //上拉
                        if(UpdateEle) el.removeChild(newLiEle)
                    }else{
                        if(el.scrollTop==0){
                            e.preventDefault();   //阻止浏览器的黑色背景
                            if(!UpdateEle){
                                //添加 li
                                newLiEle = document.createElement("li");
                                // 设置 li 属性： id、style；
                                newLiEle.setAttribute("id", "downUpdateEle");
                                newLiEle.setAttribute('style', 'list-style: none; background: #fefefe; color: #999999; font-size: 16px; opacity: 1;');
                                newLiEle.innerHTML = "下拉刷新";
                                el.insertBefore(newLiEle, el.firstChild);
                            }
                            newLiEle.style.lineHeight = touchDistance+'px';
                            if(touchDistance > 40){
                                newLiEle.innerHTML = "松开刷新";
                                newLiEle.style.lineHeight = '40px';
                                updateState = 1;
                            }
                        }
        
                    }
                })
                el.addEventListener('touchend', async() => {
                    if(updateState==1){         //刷新数据；
                        let expression_name = binding.expression;
                        let expression_fun = vnode.context[expression_name];
                        expression_fun && await expression_fun();
                        
                        updateState = 0;
                        resetNewTopEle();
                    }else{                      //不触发刷新数据
                        resetNewTopEle()
                    }
                    function resetNewTopEle(){
                        pageDownTimer = setInterval(()=>{
                            if(document.getElementById("downUpdateEle")){
                                //样式获取
                                let newLiLineheight = parseInt(newLiEle.style.lineHeight);
                                let newLiFontSize = parseInt(newLiEle.style.fontSize);
                                let newLiOpacity = newLiEle.style.opacity;
                                if(newLiLineheight<1){
                                    el.removeChild(newLiEle)
                                    clearInterval(pageDownTimer)
                                }else{
                                    newLiEle.style.lineHeight = newLiLineheight/2+'px';
                                    newLiEle.style.fontSize = newLiFontSize/2+'px';
                                    newLiEle.style.opacity = newLiOpacity/2;
                                }
                            }
                        }, 70)
                    }
                })
            }
        })
        //自定义scrollMore
        Vue.directive('scrollMore', {
            inserted: function(el, binding, vnode, oldVnode) {
                //console.log(el, binding, vnode)
                let scrollHeight = el.offsetHeight,
                    expression_name = binding.expression,
                    expression_fun = vnode.context[expression_name];
                el.addEventListener('scroll', async() => {
                    if(scrollHeight + el.scrollTop + 10 >= el.firstChild.clientHeight) {
                        try {
                            console.log("加载了.....")
                            expression_fun && await expression_fun();
                        } catch(error) {
                            console.log(error)
                        }
                    }
                })
            }
        })

main.js中引入自定义指令文件：

image.png

页面中使用如下：

效果：

GIF0.gif