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、页面使用及需要引入的需要引入的文件