微信端上拉下拉刷新

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<jsp:directive.include file="../includes/common.jsp" />
<title>
   <c:choose>
   <c:when test="${bigTypeID eq '1001'}">粮油副食</c:when>
   <c:when test="${bigTypeID eq '1002'}">酒水茶饮</c:when>
   <c:when test="${bigTypeID eq '1003'}">休闲零食</c:when>
   <c:when test="${bigTypeID eq '1004'}">富硒食品</c:when>
   <c:otherwise>商品列表</c:otherwise>
   </c:choose>
</title>
<script>
//html的font-size设为100px
(function(designWidth, maxWidth) {
   var doc = document,
           win = window;
   var docEl = doc.documentElement;
   var tid;
   var rootItem,rootStyle;

   win.addEventListener("resize", function() {
       clearTimeout(tid); //防止执行两次
       tid = setTimeout(refreshRem, 300);
   }, false);

   win.addEventListener("pageshow", function(e) {
       if (e.persisted) { // 浏览器后退的时候重新计算
           clearTimeout(tid);
           tid = setTimeout(refreshRem, 300);
       }
   }, false);

   if (doc.readyState === "complete") {
       doc.body.style.fontSize = "16px";
   } else {
       doc.addEventListener("DOMContentLoaded", function(e) {
           doc.body.style.fontSize = "16px";
       }, false);
   }
})(640, 640);
</script>
</head>

<body>
<article class="specomm_ba">
<header class="specation_hea">
<form action="${ctx}/productView/porductList.htm" method="get">
<input type="text" name="wq" id="wq" placeholder="Search" >
<%-- <input type="hidden" name="bigTypeID" value="${bigTypeID}" > --%>
<button type="button"><img src="${ctx}/images/wxweb/special_pic31.png" alt=""/></button>
</form>
</header>
<section class="specomm_sen">
<cite>您是不是要找：</cite>
<aside id="wantData">
</aside>
</section>
<section class="specomm_s">
<cite>历史搜索记录</cite>
<aside id="historyDAta">
</aside>
</section>
<a href="#" class="specomm_a">清除历史记录</a>
</article>

</article>

<jsp:directive.include file="../includes/foot.jsp" />

</body>
</html>

$().ready(function(){
   $("#wq").on('change',function(){
       var wq = $("#wq").val();
       var data = jQuery.param({wq:wq});
       $.ajax({
           url :'${ctx}/productView/getWantSearchList.htm',
           type :'post',
           data :data,
           dataType: "json",
    error:function(msg){
    //请求失败时被调用的函数
    },
    success:function(msg){
        var data=JSON.stringify(msg.data.list);
        var html = '';
        $.each(eval(data), function(index,item){
            html += '<a href="${ctx}/productView/porductList.htm?wq='+ item +'">'+ item +'</a>';
        })
        $("#wantData").html(html);
    }

       })
   })



   $(".specomm_sx a").on('click',function(){
       $(this).addClass("on").siblings().removeClass("on");
       pars.orderBy = parseInt($(".specomm_sx a").index($(this)))+1;
       $(".spehome_guessol ol").html('');
       productListAjaxPost(pars);
   })


//搜索
$(".specomm_cli input").on("touchstart",function(){
$(".specomm_ba .specation_hea input").css({"text-align":"left","padding-left":"0.5rem","width":"93%"});
$(".specomm_ba .specation_hea button").css("margin-left","3%");

$(".specomm_ba").show();
$(".specomm_ba .specation_hea input").focus();

//查看历史记录
$.ajax({
   url:'${ctx}/productView/getSearchList.htm',
      type: "POST",
      dataType: "json",
      error:function(msg){
      //请求失败时被调用的函数
      },
      success:function(msg){
          var data=JSON.stringify(msg.data.list);
          var html = '';
          $.each(eval(data), function(index,item){
              html += '<a href="${ctx}/productView/porductList.htm?wq='+ item +'">'+ item +'</a>';
          })
          $("#historyDAta").html(html);
      }
})

});

   //清空历史记录
$(".specomm_a").on("touchstart",function(){
   $.ajax({
       url:'${ctx}/productView/clearHistory.htm',
      type: "POST",
      dataType: "json",
      error:function(msg){
      //请求失败时被调用的函数
      },
      success:function(msg){
      if(msg){
          $(".specomm_ba .specomm_s aside a,.specomm_a").remove();

      }
      }
   })


});
$(".specomm_ba aside a").on("touchstart",function(){
var text=$(this).text();
$(".specomm_ba").hide();
$(".specomm_jg").show();
$(".specomm_jg em").text(text);
});

//下拉下载更多
//获取滚动条当前的位置
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);
}
window.onscroll = function () {
if (getScrollTop() + getClientHeight() == getScrollHeight()) {
   $(".spehome_mode img").show();
   var orderBy = parseInt($(".specomm_sx a.on").index())+1 ;
       var page = parseInt($("#page").attr("page-data"));
       var pars = {
               page : page+1,
               orderBy : orderBy,
               bigTypeID : "${bigTypeID}"
       };
       productListAjaxPost(pars);
}
};
});

微信端上拉下拉刷新

猜你喜欢