[置顶] 【微信平台】艺萌管家APP技术总结（一）——动态分页加载图片

一、前言

这一段时间，小编接手了一个微信平台的APP开发——艺萌管家，它就是作者通过上传自己的绘画作品，可以实现对作品的送展，拍卖的功能。刚接手的时候自己的第一个任务就是要实现动态分页加载图片功能，下面小编向大家介绍一下如何实现这个功能~~

二、效果说明

从2012年起，智能机迅速的发展到我们的手里，大家通过只能机玩游戏，看视频，看图片等功能。

很多朋友使用过这种浏览图片的APP，它加载图片有两种思路：

第一种：把图片全部都从数据库读取出来，然后都显示出来，这种方法，往往是要考验服务器的性能了，有的时候图片可能非常的多，所以就要占用很大的内存，有的时候甚至会崩溃。

第二种：加载一个页面的图片，当用户滑动到屏幕的最低端的时候再动态加载下一个屏幕大小的图片。这种方法被很多的网站采用，好处之一就是提高了性能，让用户有一种动态的感觉；另外就是减少了服务器的压力。

图一 效果展示

三、功能实现

前台JS代码：

<script type="text/javascript">
//屏幕滚动加载信息-王雷-2016年7月7日10:43:59
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight == scrollHeight) {
//总页数pagecount
var pagecount = document.getElementById("pagecount").value;
//当前页id:crrupage
var currentpage = document.getElementById("currentpage").value;
//获取session的workssetid
var session = '<%=Session["workssetid"] %>';
currentpage++;
//要开始翻页
if (currentpage <= pagecount) {
//获取当前页
document.getElementById("currentpage").value = currentpage;
//跳转到Page.ashx页面，并传值
var URL = "../AJAX/Page.ashx?json=GetWorkContent¤tpage=" + currentpage+"&pass="+ session;
//使用AJAX传值
$.ajax({
type: "GET",
url: URL,
dataType: "text",
success: function(data) {
$("#advinfolist").append(data);
}
});
}

}
});
</script>

后台分析传的Json数据的代码：

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Text;

namespace JCZB.YMGJ.Web.Web.WebManager.AJAX
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Page : IHttpHandler
{

HttpContext Context;
public void ProcessRequest(HttpContext context)
{

Context = context;
context.Response.Clear();
context.Response.ContentType = "text/html;charset=utf-8";
//获取传的值
string methodName = GetQueryString("json");
string session = GetQuerySession("pass");
string strname = GetQueryname("namesession");
string Userid = GetQueryUserid("userid");
//调用函数
string json = GetJsonStr(methodName,session,strname,Userid);
context.Response.ContentEncoding = System.Text.Encoding.UTF8;
context.Response.Write(json);
Context = null;
context.Response.End();

}
//获取userid的值
string GetQueryUserid(string Userid)
{
return Context.Request.Params[Userid];
}
//获取传过来的值
string GetQueryString(string name)
{
return Context.Request.Params[name];
}
//获取传过来的值
string GetQuerySession(string pass)
{
return Context.Request.Params[pass];
}
//获取传过来的值
string GetQueryname(string namesession)
{
return Context.Request.Params[namesession];
}
//获取json字符串
private string GetJsonStr(string methodName,string session,string strname ,string Userid )
{

string jsonString = "";
switch (methodName)
{
case "GetWorksContent":    //调用分页的效果

jsonString = new JCZB.YMGJ.Web.Web.WebManager.home.AddHistory().GetRMContent(session);
//jsonString = "1";
break;
case "GetWorkssetContent":   //调用分页的效果

jsonString = new JCZB.YMGJ.Web.Web.WebManager.home.worksset().GetRMContent(session,strname,Userid);
break;
case "GetWorkContent":   //调用分页的效果
jsonString = new JCZB.YMGJ.Web.Web.WebManager.home.works().GetRMContent(session);
break;
case "GetWorkssetByTimeContent":   //调用分页的效果
jsonString = new JCZB.YMGJ.Web.Web.WebManager.home.workssetByTime().GetRMContent(session, strname, Userid);
break;
//case "GetWorkssetByPositionContent":   //调用分页的效果
//    jsonString = new JCZB.YMGJ.Web.Web.WebManager.home.workssetByPosition().GetRMContent(session);
//    break;
//case "GetWorkssetByArtistidContent":   //调用分页的效果
//    jsonString = new JCZB.YMGJ.Web.Web.WebManager.home.workssetByArtistid().GetRMContent(session);
//    break;
//case "AddWorks ":   //调用分页的效果
//    JCZB.YMGJ.Model.ymgj_user user = (JCZB.YMGJ.Model.ymgj_user)Session["User"];
//    string uid = user.uid.ToString();
//    jsonString = new JCZB.YMGJ.Web.Web.WebManager.home.AddWorks().GetRMContent(uid);
//    break;
}
return jsonString;
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

aspx后台页面显示方法代码：

#region 第一次加载，显示第一页的所有的内容-王雷-2016年7月6日09:09:38
/// <summary>
/// 第一次加载，显示第一页的所有的内容-王雷-2016年7月6日09:09:38
/// </summary>
/// <returns></returns>
public string GetWorksContent()
{
//设置每页要显示的个数
int pageSize = 6;
int pageIndex;
if (Context.Request.QueryString["currentpage"] != null)
{
pageIndex = int.Parse(Context.Request.QueryString["currentpage"].ToString());
}
else
{
pageIndex = 1;
}

int pageCount = 0;
StringBuilder sb = new StringBuilder();
pagename = Session["pagename"].ToString();
userid = Session["UserID"].ToString();
time=Session["time"]==null?"null":Session["time"].ToString();
workstate =Session["workstate"].ToString();
//根据选择类型显示拼出SQL语句
switch (pagename)
{
case "1":
strWhere = " workssetid=  " + worksetid + " and " + workstate + " and userid= " + userid;
break;
case "2":
strWhere = " creationtime='" + time + "' and " + workstate + " and userid= " + userid;
break;
case "3":
strWhere = " position='" + position + "' and " + workstate + " and userid= " + userid;
break;
case "4":
if (artistid == "")
{

}
strWhere = " artistid=" + artistid + " and " + workstate + " and userid= " + userid;
break;
default:

return "";
}
//查询总页数，并查询出数据结果。
DataSet worksDs = worksBll.GetListTwo(pageSize, pageIndex, strWhere, ref pageCount);
//如果图片存在
if (worksDs != null && worksDs.Tables.Count > 0 && worksDs.Tables[0].Rows.Count > 0)
{
//通过在后台拼出一个界面显示到前台。
this.pagecount.Value = pageCount.ToString();
sb.Append("<table id=\"advinfolist\"  runat=\"server\" class=\" table col-sm-12 col-xs-12\" style=\"margin-top: 0px;border-bottom: 0px;margin-bottom: 0px;width:100%\">");
//显示图片，每行显示两个
for (int i = 0; i < worksDs.Tables[0].Rows.Count; i += 2)
{
sb.Append("<tr>");
sb.Append("<td class=\"text-left\" style=\"vertical-align: middle;width:50%\">");
sb.Append("<center>");
//因为每行显示两个，显示第一个的时候，要判断查询出来结果的行数是否大于已经显示的个数i
if (worksDs.Tables[0].Rows.Count-i > 0)
{
sb.Append("<div  runat=\"server\">");
//点击图片跳转页面
sb.Append("<a href=Detial.aspx?workid=" + worksDs.Tables[0].Rows[i]["uid"].ToString() + ">");
sb.Append("<img src=\"" + worksDs.Tables[0].Rows[i]["worksimgpath"].ToString().Trim().Split('|')[0] + "\" style=\"width:100%; height:220px; \" />");
sb.Append("</a>");
sb.Append("</div>");
sb.Append("<div style=\"margin-top: 10px;\">");
//图片下显示作品名字
sb.Append("<span>");
sb.Append(worksDs.Tables[0].Rows[i]["worksname"].ToString());
sb.Append("</span>");
sb.Append("</div>");
sb.Append("<div style=\"margin-top: 5px;\">");
//作品下显示作品的状态
sb.Append("<span>");
sb.Append(worksDs.Tables[0].Rows[i]["worksstate"].ToString());
sb.Append("</span>");
sb.Append("<span>/</span>");
sb.Append("<span>");
sb.Append(worksDs.Tables[0].Rows[i]["worksprice"].ToString());
sb.Append("</span>");
sb.Append("<input type=\"checkbox\" visible=false style=\"display:none;background: #E8E8E8; border: 1px solid #E8E8E8;float: right;margin-right: 10px;margin-bottom: 10px;\" name=\"chk\" id=\"" + worksDs.Tables[0].Rows[i]["uid"].ToString() + "\"/>");
sb.Append("</div>");
}
sb.Append("</center>");
sb.Append("</td>");
sb.Append("<td class=\"text-left\" style=\"vertical-align: middle;width:50%\">");
sb.Append("<center>");
sb.Append("<div  runat=\"server\">");
//因为每行显示两个，显示第二个的时候，要判断查询出来结果的行数是否大于已经显示的个数i
if (worksDs.Tables[0].Rows.Count-i > 1)
{
sb.Append("<a href=Detial.aspx?workid=" + worksDs.Tables[0].Rows[i + 1]["uid"].ToString() + ">");
sb.Append("<img src=\"" + worksDs.Tables[0].Rows[i + 1]["worksimgpath"].ToString().Trim().Split('|')[0] + "\" style=\"width:100%; height:220px; \" />");
sb.Append("</a>");
sb.Append("</div>");
sb.Append("<div style=\"margin-top: 10px;\">");
sb.Append("<span>");
sb.Append(worksDs.Tables[0].Rows[i + 1]["worksname"].ToString());
sb.Append("</span>");
sb.Append("</div>");
sb.Append("<div style=\"margin-top: 5px;\">");
sb.Append("<span>");
sb.Append(worksDs.Tables[0].Rows[i + 1]["worksstate"].ToString());
sb.Append("</span>");
sb.Append("<span>/</span>");
sb.Append("<span>");
sb.Append(worksDs.Tables[0].Rows[i + 1]["worksprice"].ToString());
sb.Append("</span>");
sb.Append("<input type=\"checkbox\" visible=false  style=\"display:none;background: #E8E8E8; border: 1px solid #E8E8E8;float: right;margin-right: 10px;margin-bottom: 10px;\" name=\"chk\" id=\"" + worksDs.Tables[0].Rows[i + 1]["uid"].ToString() + "\"/>");
sb.Append("</div>");
}
sb.Append("</center>");
sb.Append("</td>");
sb.Append("</tr>");
}
sb.Append("</table>");
}
return sb.ToString();
}
#endregion

#region 当第上页滚动到底的时候显示下一页的内容-王雷-2016年7月6日09:09:43
/// <summary>
/// 当第上页滚动到底的时候显示下一页的内容-王雷-2016年7月6日09:09:43
/// </summary>
/// <returns></returns>
public string GetRMContent(string session )
{
//设定滚动的时候加载图片的个数
int pageSize = 6;
//设置页码
int pageIndex = int.Parse(Context.Request.QueryString["currentpage"].ToString());
//页数统计
int pageCount = 0;
StringBuilder sb = new StringBuilder();
//查询总页数，并查询出数据结果。
DataSet worksDs = worksBll.GetListTwo(pageSize, pageIndex, strWhere, ref pageCount);
//如果图片存在
if (worksDs != null && worksDs.Tables.Count > 0 && worksDs.Tables[0].Rows.Count > 0)
{
//显示图片，每行显示两个
for (int i = 0; i < worksDs.Tables[0].Rows.Count; i += 2)
{
sb.Append("<tr>");
sb.Append("<td class=\"text-left\" style=\"vertical-align: middle;width:50%\">");
sb.Append("<center>");
//因为每行显示两个，显示第一个的时候，要判断查询出来结果的行数是否大于已经显示的个数i
if (worksDs.Tables[0].Rows.Count - i > 0)
{
sb.Append("<div  runat=\"server\">");
//点击图片跳转页面
sb.Append("<a href=Detial.aspx?workid=" + worksDs.Tables[0].Rows[i]["uid"].ToString() + ">");
sb.Append("<img src=\"" + worksDs.Tables[0].Rows[i]["worksimgpath"].ToString().Trim().Split('|')[0] + "\" style=\"width:100%; height:220px; \" />");
sb.Append("</a>");
sb.Append("</div>");
sb.Append("<div style=\"margin-top: 10px;\">");
//图片下显示作品名字
sb.Append("<span>");
sb.Append(worksDs.Tables[0].Rows[i]["worksname"].ToString());
sb.Append("</span>");
sb.Append("</div>");
sb.Append("<div style=\"margin-top: 5px;\">");
//作品下显示作品的状态
sb.Append("<span>");
sb.Append(worksDs.Tables[0].Rows[i]["worksstate"].ToString());
sb.Append("</span>");
sb.Append("<span>/</span>");
sb.Append("<span>");
sb.Append(worksDs.Tables[0].Rows[i]["worksprice"].ToString());
sb.Append("</span>");
sb.Append("<input type=\"checkbox\" style=\"display:none;background: #E8E8E8; border: 1px solid #E8E8E8;float: right;margin-right: 10px;margin-bottom: 10px;\" name=\"chk\" id=\"" + worksDs.Tables[0].Rows[i]["uid"].ToString() + "\"/>");
sb.Append("</div>");
}
sb.Append("</center>");
sb.Append("</td>");
sb.Append("<td class=\"text-left\" style=\"vertical-align: middle;width:50%\">");
sb.Append("<center>");
sb.Append("<div  runat=\"server\">");
//因为每行显示两个，显示第二个的时候，要判断查询出来结果的行数是否大于已经显示的个数i
if (worksDs.Tables[0].Rows.Count - i > 1)
{
sb.Append("<a href=Detial.aspx?workid=" + worksDs.Tables[0].Rows[i + 1]["uid"].ToString() + ">");
sb.Append("<img src=\"" + worksDs.Tables[0].Rows[i + 1]["worksimgpath"].ToString().Trim().Split('|')[0] + "\" style=\"width:100%; height:220px; \" />");
sb.Append("</a>");
sb.Append("</div>");
sb.Append("<div style=\"margin-top: 10px;\">");
sb.Append("<span>");
sb.Append(worksDs.Tables[0].Rows[i + 1]["worksname"].ToString());
sb.Append("</span>");
sb.Append("</div>");
sb.Append("<div style=\"margin-top: 5px;\">");
sb.Append("<span>");
sb.Append(worksDs.Tables[0].Rows[i + 1]["worksstate"].ToString());
sb.Append("</span>");
sb.Append("<span>/</span>");
sb.Append("<span>");
sb.Append(worksDs.Tables[0].Rows[i + 1]["worksprice"].ToString());
sb.Append("</span>");
sb.Append("<input type=\"checkbox\" style=\"display:none;background: #E8E8E8; border: 1px solid #E8E8E8;float: right;margin-right: 10px;margin-bottom: 10px;\" name=\"chk\" id=\"" + worksDs.Tables[0].Rows[i + 1]["uid"].ToString() + "\"/>");
sb.Append("</div>");
}
sb.Append("</center>");
sb.Append("</td>");
sb.Append("</tr>");
}
}
return sb.ToString();
}
#endregion

B层查询记录，以及显示记录

#region B层查询记录，以及显示记录-王雷-2016年7月23日18:10:51
/// <summary>
/// B层查询记录，以及显示记录-王雷-2016年7月23日18:10:51
/// </summary>
/// <param name="PageSize">每页加载个数</param>
/// <param name="PageIndex">页码</param>
/// <param name="strWhere">拼的sql语句</param>
/// <param name="pageCount">总页数</param>
/// <returns>DataSet</returns>
public DataSet GetListTwo(int PageSize, int PageIndex, string strWhere, ref int pageCount)
{
//查询所要判断条件图片的个数
int rowCount = dal.GetRecordCount(strWhere);
if (rowCount <= 0)
{
return null;
}

int startIndex = 0;
int endIndex = 0;
//计算一共有多少页，每页显示的个数
Tools.getStartIndexAndEndIndex(PageSize, ref PageIndex, rowCount, ref startIndex, ref endIndex, ref pageCount);
//查询当前页要显示的图片内容
return dal.GetListTwo(strWhere, startIndex, endIndex);

}
#endregion

Tools类getStartIndexAndEndIndex方法：

/// <summary>
/// 根据PageSize、PageIndex和rowCount获取查询数据的起始位置和结束位置
/// </summary>
/// <param name="PageSize">每页数据大小</param>
/// <param name="PageIndex">页码</param>
/// <param name="rowCount">数据总记录数</param>
/// <param name="startIndex">查询起始位置</param>
/// <param name="endIndex">查询的结束位置</param>
public static void getStartIndexAndEndIndex(int PageSize, ref int PageIndex, int rowCount, ref int startIndex, ref int endIndex, ref int pageCount)
{
if (PageSize >= rowCount)
{
startIndex = 0;
endIndex = PageSize;
pageCount = 1;
}
else
{
pageCount = Convert.ToInt32(Math.Ceiling((double)rowCount / (double)PageSize));
if (PageIndex > pageCount)
{
PageIndex = pageCount;
}
if (PageIndex < 1)
{
PageIndex = 1;
}
startIndex = (PageIndex - 1) * PageSize;
endIndex = PageSize;
}
}

D层：

/// <summary>
/// 获取记录总数
/// </summary>
public int GetRecordCount(string strWhere)
{
StringBuilder strSql = new StringBuilder();
strSql.Append("select count(1) FROM ymgj_works ");
if (strWhere.Trim() != "")
{
strSql.Append(" where " + strWhere);
}
object obj = DbHelperMySQL.GetSingle(strSql.ToString());
if (obj == null)
{
return 0;
}
else
{
return Convert.ToInt32(obj);
}
}

/// <summary>
/// 分页获取数据列表
/// </summary>
public DataSet GetListTwo(string strWhere, int startIndex, int endIndex)
{
StringBuilder strSql = new StringBuilder();
strSql.Append("SELECT * from ymgj_works");
if (!string.IsNullOrEmpty(strWhere.Trim()))
{
strSql.Append(" where " + strWhere);
}
strSql.Append(" "+"limit" + " " + startIndex + " ," + endIndex + "");
return DbHelperMySQL.Query(strSql.ToString());
}

四、总结

刚刚开始的时候自己真的不知道如何下手，后来不断的实现，提高，查找文件结果就慢慢的浮现出来了，大家加油去做吧！