今天在写discuz手机端帖子内容评论的下拉加载时，遇到几个记忆较模糊的location属性，于是在网上找了下，顺便加深下自己知识的储备，特此记录下自己遇到的问题。
其次，discuz手机端帖子实现下拉加载网上基本没有现成的，除官方提供的插件外，不过也是需要收费的，还不便宜哦，于是本人将自己实现的代码部分，全盘贴出分享，供大家学习。
下面先跟我一起来复习(学习)下location的一些基础知识吧。
Location 对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
注意： 没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。
Location对象包含以下8个属性和3个方法：
Location对象属性
| 属性 | 描述 | 实例 | 运行结果 |
|---|---|---|---|
| href | 返回完整的URL，即浏览器访问绝对路径 | <script>document.write(location.href);</script> | https://www.sojoson.com/mbjc/13.html |
| protocol | 返回一个URL协议头，即http或https | <script>document.write(location.protocol);</script> | https |
| hostname | 返回URL的主机名，即网站主网址 | <script>document.write(location.hostname);</script> | www.sojoson.com |
| host | 返回一个URL的主机名和端口(默认端口号为80，不显示) | <script>document.write(location.host);</script> | www.sojoson.com:8080 |
| port | 返回一个URL服务器使用的端口号 | <script>document.write(location.port);</script> | 8080(默认端口号为80，将不显示) |
| pathname | 返回的URL路径名 | <script>document.write(location.pathname);</script> | /mbjc/13.html（去掉协议头和主机名剩下的部分） |
| search | 返回一个URL的查询部分 （网址问号 ? 之后的部分） | 假设当前URL地址为：https://www.sojoson.com?keywords=location <script>document.write(location.search);</script> | ?keywords=location |
| hash | 返回一个URL的锚部分(从 # 号开始的部分) | 假设当前URL地址为：https://www.sojoson.com/rizhi/13.html#comments <script>document.write(location.search);</script> | #comments |
Location 对象方法
| 方法 | 说明 |
|---|---|
| reload() | 重新载入当前文档。（用在网站后台点击刷新的比较多） |
| assign() | 载入一个新的文档。（用的相对较少） |
| replace() | 用新的文档替换当前文档。（一般结合iframe使用在网站后台界面较多） |
以上是location的8个属性和3个方法，OK，下面我先贴出在开发中写到的完整代码：
jQuery(function(){
var sm = jQuery('#sm-post'),
smp = jQuery('.postlist');
if (!sm.length) return
var tid = sm.get(0).dataset.tid,
load_able = true,autoload_disabled = sm.attr('data-autoload-disabled'),
curr_page = 1;
if(location.search == ""){
var strs = new Array(); //定义一数组
strs = location.pathname.split("-"); //字符分割
curr_page = strs[2];
}else {
curr_page = getQueryVariable("page") ? getQueryVariable("page"):1;
}
function setAble(flag, lang) {
var arrLang = [
'使劲戳 查看更多评论',
'加载中...',
'暂无更多评论'
];
lang = lang || 0;
if (flag) {
load_able = true;
sm.addClass('none');
}else{
load_able = false;
sm.removeClass('none');
}
sm.find('a').html(arrLang[lang])
}
/**
* 移动端下拉加载
*/
function loader() {
let page = parseInt(curr_page) + 1, //当前页
ids = [], //楼层id列表
pids = [], //评论id(数字)，请求参数
praiseStatus = [], //包含(帖子id,点赞数量，用户是否点赞)的列表
params = [], //url参数，params.tid是帖子id
patten = /floor_list_[\d]*/g, //获取楼层id的列表
pidUrl = '';
if (!load_able) return;
setAble(false, 1);
var url_ajax;
if(location.search != ""){
url_ajax = location.pathname + location.search + '&is_ajax=1&page=' + page;
}else {
//pc伪静态复制到wap端展示
let str = location.pathname;
if(str.indexOf("thread") != -1 ){
var search = '?mod=viewthread&tid='+tid+'&mobile=2';
}
url_ajax = './forum.php' + search +'&is_ajax=1&page='+page;
}
// $.get(location.pathname + location.search + '&is_ajax=1&page=' + page)
$.get(url_ajax)
.done(function (nodes){
if (nodes.length) {
$(nodes).appendTo(jQuery('.commentList'));
//获取帖子id(tid)
let arr = window.location.search.split("&");
for (let i = 0; i < arr.length; i++) {
let item = arr[i].split('=');
params[item[0]] = item[1];
}
//获取刷新出来的所有(pid)，跟后端返回的ids进行比较并设置status
ids = nodes.match(patten);
for (let i = 0; i < ids.length; i++) {
pids.push(ids[i].substr(11));
pidUrl = pidUrl += '&pid[]=' + ids[i].substr(11)
}
setTimeout(function () {
curr_page++;
setAble(true)
}, 1000)
}else{
setAble(false, 2)
}
})
.fail(function (e) {
console.log(e);
setTimeout(function () {
setAble(true)
}, 1000)
})
}
//var scroll_get = true;
jQuery('.postlist').scroll(function(){
if (autoload_disabled == 1) return;
var stan = sm.offset().top - smp.offset().top - smp.height();
//var stan = getScrollHeight() - getScrollTop() - getClientHeight();
if (stan-100 < 0 ){
//scroll_get = false;
//console.log('下拉刷新了');
loader()
}
});
sm.click(function(){
loader()
})
});
//获取滚动条当前的位置
function getScrollTop() {
var scrollTop = 0;
if(document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
}else if(document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
//获取当前可视范围的高度
function getClientHeight() {
var clientHeight = 0;
if(document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
}else{
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}
//获取文档完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
//获取url参数
function getQueryVariable(variable) {
var query = document.location.href;
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}从上面location的属性使用和说明，再结合script的代码部分，和代码的注释，基本都可以看懂了，你不妨试试根据我的代码写出帖子列表页下拉加载。
发表评论