discuz手机端帖子内容评论实现下拉加载代码完整版

管理员 2020-11-13 15:51:41 13046 抢沙发

今天在写discuz手机端帖子内容评论的下拉加载时,遇到几个记忆较模糊的location属性,于是在网上找了下,顺便加深下自己知识的储备,特此记录下自己遇到的问题。

其次,discuz手机端帖子实现下拉加载网上基本没有现成的,除官方提供的插件外,不过也是需要收费的,还不便宜哦,于是本人将自己实现的代码部分,全盘贴出分享,供大家学习。

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的代码部分,和代码的注释,基本都可以看懂了,你不妨试试根据我的代码写出帖子列表页下拉加载。

文章版权及转载声明

作者:管理员 ,本文地址:https://www.sojoson.com/mbjc/13.html发布于 2020-11-13 15:51:41
文章转载或复制请以超链接形式并注明出自SoJoson博客

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (有4330条评论,13046人围观) 参与讨论