mui H5+ 实现页面刷新

最新推荐文章于 2024-06-16 19:46:16 发布

Tango糖果π

最新推荐文章于 2024-06-16 19:46:16 发布

阅读量495

点赞数

文章标签：数学建模

本文链接：https://blog.csdn.net/mahaokun/article/details/131005963

版权

该代码段展示了如何使用mui.js库配置下拉刷新(pullRefresh)功能，请求数据并构建HTML内容。当用户下拉时，会获取顶部Banner信息和最新列表信息流。数据加载完成后，更新页面内容并结束下拉刷新状态。

摘要由CSDN通过智能技术生成

mui.init({
  pullRefresh : {
	container:'#main',
	down : {
		style: 'circle',
		offset: '0px',
		auto: true,
		// height: '150px',
		ofset:'30px',
		// range:'200px',
		contentrefresh : "正在刷新...",
		callback :pulldownFresh
	},
	up : {
		contentrefresh : "正在刷新...",
		callback :pullupFresh 
	}
  }
});

function pulldownFresh() {
	//请求顶部banner信息
	var data = {
		column: "id,post_id,title,author_name,cover,published_at" //需要的字段名
	}
	
	//请求最新列表信息流
	mui.getJSON("http://spider.dcloud.net.cn/api/news", data, function(rsp) {
		console.log(rsp.length);
		var str = ''
		str += '<div class="mui-slider-item mui-slider-item-duplicate">'
		str += '	<a href="javascript:;" id="'+rsp[rsp.length-1].post_id+'">'
		str += '		<img src="'+rsp[rsp.length-1].cover+'">'
		str += '	</a>'
		str += '</div>'
		for(var i=0; i<rsp.length; i++) {
			str += '<div class="mui-slider-item">'
			str += '	<a href="javascript:;" id="'+rsp[i].post_id+'">'
			str += '		<img src="'+rsp[i].cover+'">'
			str += '</a>'
			str += '</div>'
		}
		str += ''
		str += '<div class="mui-slider-item mui-slider-item-duplicate">'
		str += '	<a href="javascript:;" id="'+rsp[0].post_id+'">'
		str += '		<img src="'+rsp[0].cover+'">'
		str += '	</a>'
		str += '</div>'
		document.getElementById('slider-img').innerHTML = str
	});
	
	mui('#main').pullRefresh().endPulldown()
}