H5+MUI WebAPP 首页信息流研发总结

功能实现

在首页栏下拉会显示安卓原生的下拉控件并向服务器请求数据进行数据的刷新
在首页上拉则会请求剩余数据并实现数据的动态加载

点击相关内容如果有外部链接则可跳转至详情页面

点击首页图片可实现直接浏览图片

关键代码

HTML结构
要是实现上拉加载与下拉刷新重点就是这二个手势该如何触发对应的事件，首先就是布局HTML结构
这个功能MUI官方也有相应的文档与实例，我这里使用的是单webview模式，性能要比双webview模式更好。

mui-content是主体
<div class="mui-content">
     下面的是区域滚动
	<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
         <div class="mui-scroll" >
              里面的二个div是我用来追加信息内容的
             <div id="zhidin">

             div>
             <div id="gxsjdd">
             	
             div>
		div>
	div>
div>

上拉与下拉动画触发
要实现该功能首先是要初始化，在mui初始化时设置pullRefresh的各项参数
这里的下拉刷新动画调用的就是原生下拉刷新控件（手机环境下）

//mui初始化
mui.init({  
 pullRefresh : { 
    container:'#pullrefresh',//指定刷新容器（参照上面的html）
    down: {//下拉刷新
		  style:'circle',//原生样式
		  callback: xlsx , //请求的方法
		  auto:true,//是否在启动时自动触发一次刷新
		  offset: '0px', //起始位置
		},
    up:{  //上拉加载
       height:50, //拖动距离
       auto:false,//自动触发
　　　　contentrefresh: 'Loading...',//加载时的文字
　　　　contentnomore:'───── N U L L  ─────',//无数据时显示的文字
　　　　callback:sljz//请求的方法
　　} 
  }  
}); 	

内容绑定与加载
基本的设置已经弄好，下面就是关键点给刷新后给页面追加数据了
上面初始化时已经给下拉与上拉定义了触发事件，下面就该写二个事件的代码了

下拉刷新
function xlsx(){
     //这里填写自己的服务器请求地址
   	$.ajax({  
		url:"",
		dataType:"jsonp", 
		data:guanxin1(),	
		cache: true, 
		jsonpCallback:"yesok",
		error:function(XMLHttpRequest, textStatus, errorThrown){
			mui.toast("网络好像挂掉了~");
			//下面这段代码用于停止下拉刷新，请求完成时也要加上，如果不写则不会停止
			mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
		} 
	}); 
 } 
数据请求成功
function yesok(data){
	if(data.ret==200){  
		var mylist=data.list;
		//将数据进行存储，上拉加载时就不需要再请求服务器了
        plus.storage.setItem("huancunlist",JSON.stringify(mylist));
        //将数据按时间进行排序
		mylist.sort(function(a,b){
		    return Date.parse(b.add_time) - Date.parse(a.add_time);//时间正序
		});
        //追加6条数据
		for(i=0;i<6;i++){zhuijiashuju(mylist[i],0);}
		//停止刷新动画
	    mui('#pullrefresh').pullRefresh().endPulldownToRefresh();    
    }else{
       //停止刷新动画
	   mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
    }
} 

上拉加载
function sljz(){
     //读取存储的数据
 	var gxzslist=JSON.parse(plus.storage.getItem("mylist")); 
     //再追加10个数据
	for(i=xh;i<xh+10;i++){
		if(gxzslist[i]==undefined || gxzslist[i]==null){
			 mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
			 return;
		} 
		zhuijiashuju(gxzslist[i],0);
	}
	//上拉加载动画停止
    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
    mui('#pullrefresh').pullRefresh().refresh(true);//重置上拉加载
}  

图片查看

对于H5+的图片的查看，这里面的最大问题是在点击图片的同时会触发父元素的点击查看文章内容的事件，图片还没响应就已经跳转到文章里面去了，所以这里还要解决一个冒泡的问题，在点击图片时阻止点击事件影响到父元素。

//定义图片的点击事件
$(document).on('tap', '.jjtp', function (e){
    e.stopPropagation();//阻止把事件分派到其他节点
	var gqds=$(this).attr("alt");//提取图片的路径
	if(gqds!=""){
	    //调用H5+的nativeUI.previewImage查看图片
		plus.nativeUI.previewImage([gqds]);
	}
});

焦旭涛 2019-01-20