前端与移动端交互 及下拉刷新

曾经和安卓还有ios同事一起做了APP，其中一个模块是嵌入了h5页面，有些和移动端的交互，现记录一下，其中serviceListener为移动端监听的方法名

如果是ios8，serviceListener('');括号里为与app交互内容

ios其他版本，window.webkit.messageHandlers.serviceListener.postMessage('');       

Android，window.JavascriptInterface.serviceListener('');

$.ajax({
                type: "GET",
                url: ".",
                data: {},
                dataType: "text",
                async: true,

                timeout: 10000,
                headers: {
                    "os":"ios" //假装是ios移动端访问接口
                },
                success: function (data) {

                      var json = (new Function("", "return " + data.split("&&&")[0]))();

                }

})

也可使用移动端自定义方法 例如 window.cmcc_url.gotoURL()

错误图片预加载

beforeLoadImage: function () {
            var img1 = new Image();
            img1.src = '../../app/img/liveNodata3.png';
        },

解决iPhone的冒泡兼容

$("body").children().click(function () {
            });

下拉刷新  时间太久了，忘记当初是从哪里摘的了，如有侵权，请联系我删除，蟹蟹蟹蟹~ 自己有稍微改动

html部分

<div id="loading">
                <div class="loading-inner"></div>
             </div>

js部分

//下拉刷新
function loading(method){
  var flag = true;
  //第一步：下拉过程
  function slideDownStep1(dist) { // dist 下滑的距离，用以拉长背景模拟拉伸效果
      
          var slideDown1 = document.getElementById("slideDown1");
          if(dist>-60){
              slideDown1.style.display = "block";
              slideDown1.style.height = (- dist) + "px";
          }
  }
  //第二步：下拉，然后松开，
  function slideDownStep2() {
      var slideDown1 = document.getElementById("slideDown1")
      slideDown1.style.display = "none";
      $("#loading").css("display","block");
      eval(method);
  }
  //第三步：刷新完成，回归之前状态
  function slideDownStep3() {
      var slideDown1 = document.getElementById("slideDown1")
      slideDown1.style.display = "none";
      flag = true;
  }

  //下滑刷新调用
  k_touch("wrapRefresh", "y");
  //contentId表示对其进行事件绑定，way==>x表示水平方向的操作，y表示竖直方向的操作
  function k_touch(contentId, way) {
      var _start = 0,
          _end = 0,
          _content = document.getElementById(contentId);
      _content.addEventListener("touchstart", touchStart, false);
      _content.addEventListener("touchmove", touchMove, false);
      _content.addEventListener("touchend", touchEnd, false);

      function touchStart(event) {
          if(!flag) {
              return false;
          }
          var touch = event.targetTouches[0];
          if(way == "x") {
              _start = touch.pageX;
          } else {
              _start = touch.pageY;
          }
      }

      function touchMove(event) {
          if(!flag) {
              return false;
          }
          var touch = event.targetTouches[0];
          if(way == "x") {
              _end = (_start - touch.pageX);
          } else {
              _end = (_start - touch.pageY);
              //下滑才执行操作
              if(_end < 0) {
                  slideDownStep1(_end);
              }
          }

      }

      function touchEnd(event) {
          if(_end > -30) {
              slideDownStep3()
          } else {
              slideDownStep2();
              //模拟刷新成功进入第三步
              setTimeout(function() {
                  slideDownStep3();
              }, 500);
          }
          _end=0;
      }
  }
}