1.在main 同級建立一個xxx.js文件
文件內信息 文件內容取自一位大佬博客
import Vue from 'vue'
Vue.directive('loadmore', {
bind (el, binding) {
// 獲取element-ui定義好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
SELECTWRAP_DOM.addEventListener('scroll', function () {
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
if (CONDITION) {
binding.value()
}
})
}
})
2.在main.js引入該js
import './xxx'
3.頁面內使用
4.下拉刷新
5.輸入搜索查詢
6，jq封裝下拉加載 （復制就能使用）
var data=['假數據1','假數據2','假數據3','假數據4','假數據5','假數據6','假數據7','假數據8','假數據9']
var data_=['假數據11','假數據12','假數據13','假數據14','假數據15','假數據16','假數據17','假數據18','假數據19']
var loadObjFun = {
scrollInit:0,//滾動條距離頂部的高度
loadInitFun: function (dome) {
loadObjFun.initDomeFun(dome);//初始化容器
loadObjFun.niceScrollFun("searchContent"); //設置滾動條
loadObjFun.enterFun("input_text");
},
initDomeFun:function (dome) {//渲染頁面展示
var domeStr = "<div class='load_module'>";
domeStr += "<input type='text'class='input_text' placeholder='輸入3'>";
domeStr += "<div class='searchContent'>";
domeStr += "<ul class='list'>";
domeStr += "</ul>";
domeStr += "</div>";
domeStr += "</div>";
$("."+dome).append(domeStr);
//給輸入框綁定事件
loadObjFun.inputFun("input_text");
},
inputFun:function (dome) { //監聽input輸入參數變化
inputs = document.getElementsByClassName(dome)[0];
inputs.oninput=function (){
if(inputs.value){
input_val = inputs.value;
// loadObjFun.ajaxFun(ype,data,url,success) // 請求方法
console.log(input_val,'輸入的值')
//模擬成功后的請求 渲染頁面
if(input_val == 3){
return
$(".list").empty();
$(".searchContent").show();
loadObjFun.searchContetFun(data_)//渲染數據
$(".searchContent").scrollTop(0);
loadObjFun.resizeFun(loadObjFun.scrollDome);
}
}else{
input_val = inputs.value;
console.log(input_val,'清空');
$(".searchContent").hide();
$(".list").empty();
}
};
},
emptyFun:function (dome,childDome) {// 清空方法 dome 父節點 childDome 需要綁定事件的節點
$('.'+dome).on("click",childDome,function (){
alert('清空');
$(".list").empty();
$(".searchContent").hide();
});
},
enterFun:function (dome) { // 回車搜索
$("."+dome).bind('keyup', function(event) {
if (event.keyCode == "13") {
//回車執行查詢
apply();
}
});
},
//搜索內容渲染 (改成你想要的樣式)
searchContetFun:function (data) {
var str = "";
$.each(data, function (index, item) {
str = "<li>"+ item +"</li>";
$(".list").append(str);
});
},
niceScrollFun: function (dome) {// 滾動到底部發送請求
//生成滾動條兼容各大瀏覽器
loadObjFun.scrollDome = dome;
$("." + dome).niceScroll("." + dome + " ul", {
cursorborder: "",
cursorcolor: "LightGray",
boxzoom: true,
railalign: "right",
preventmultitouchscrolling: true
});
// 監聽滾動條到達底部
var nDivHight = $("." + dome).height();
$("." + dome).scroll(function (){
var str = "";
var nScrollHight = $(this)[0].scrollHeight; //當前內容的高度
loadObjFun.scrollInit = $(this).scrollTop();
//到達底部發送請求
if (loadObjFun.scrollInit + nDivHight >= nScrollHight){
// 模擬滾動到底部發送請求
loadObjFun.searchContetFun(data)
// loadObjFun.ajaxFun(ype,data,url,success) // 請求方法
//自動適應高度 （得在成功的請求中調用）↑↑↑↑↑↑
loadObjFun.resizeFun(loadObjFun.scrollDome);
}
});
},
resizeFun:function (dome) {//重置滾動條
setTimeout(function(){
// $("." + dome).getNiceScroll().hide(); //隱藏滾動條
$("." + dome).getNiceScroll().resize();
}, 500);
},
ajaxFun:function(type,data,url,success){//type 請求類型 data 攜帶參數 url 請求地址 success 回調方法
var xhr = new XMLHttpRequest();
if(type == "get"){
if(data){
url+='?';
for (var key in data) {
if (data.hasOwnProperty(key)) {
url+=data[key]+"&";
};
};
url = url.substring(0,url.length-1);
};
xhr.open(type,url);
xhr.send();
}else if(type == "post"){
xhr.open(type,url);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
if(data) {
xhr.send(data);
}else{
xhr.send();
};
};
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
success(xhr);
};
};
}
};
function apply() {
$(".list").empty();
$(".searchContent").show();
loadObjFun.searchContetFun(data_)//渲染數據
$(".searchContent").scrollTop(0);
loadObjFun.resizeFun(loadObjFun.scrollDome);
}
// 傳入容器節點
loadObjFun.loadInitFun("load");
7、頁面使用及需要引入的需要引入的文件
