移动端+query mobile 下滑刷新数据以及搜索

最新推荐文章于 2024-09-10 14:15:01 发布

彼丶之岸

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量142

点赞数

分类专栏： js 文章标签： PHP jquery html

本文链接：https://blog.csdn.net/qq_39817686/article/details/96103596

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>111</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


</head>
<body>

<div data-role="page" id="pageone">
<div data-role="header" data-position="fixed" >
        <h1>出库</h1>
        <a href="#demo-intro" data-rel="back" data-icon="carat-l" data-iconpos="notext"></a>
        <a href="#" class="ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext"></a>

        <div class="input-group tbns" style="padding-top: 1px;width: 100%">
        <input type="hidden" name="id" value="132">
        <input type="text" class="form-control input-lg" id="search" placeholder="搜索内容..." data-role="none" size="20">
         <span class="input-group-addon btn btn-primary searchbtn" onclick="getData2()" >搜索</span>
      </div>

</div>
<div data-role="main" class="ui-content" >
      <ul data-role="listview" data-inset="true" id="content">
    </ul>
    <h6 style="text-align: center;display: none;" class="load">加载更多</h6>
    <h6 style="text-align: center;display: none;" class="loads">已经到底了</h6>
    <h6 style="text-align: center;display: none;" class="loadss">没有数据</h6>
</div>

<script type="text/javascript">

init();
function init(key =''){
    currentPage = 0;
    totalPage = 0;
    finished = 0;
     i = 0;
    getData(key); // 第一次加载
}

$(document).ready(function(){
 $(window).scroll(function(){
    var scrollTop = $(this).scrollTop();               //滚动条距离顶部的高度
　　var scrollHeight = $(document).height();           //当前页面的总高度
　　var windowHeight = $(this).height();               //当前可视的页面高度

  　if(scrollTop + windowHeight >= scrollHeight && i == 1){   
           i = 0;
          getData();
    }
  })
});

  function getData2(){
     $("#search").unbind('click').click(function () {
        $(".searchbtn").show()
       });

       $(".searchbtn").bind('click', function () {
         $(".searchbtn").hide()
       });

     var keywords = $.trim($("#search").val());
      $('#content').empty();
      if(keywords ==''){
          init();
      }else{
         $(".loads").hide();
         init(keywords);

      }
    
  }

 function getData(key=''){
    
    if(finished){
        console.log('加载完成..');
        return false;
    }
    console.log(key);
    $.ajax({
        url: "__URL__/iajax",
        type: "post",
        data: {page: currentPage,key:key},
        dataType: "json",
         async: true,
        beforeSend: function(){
          $(".load").show();
        },
        complete: function () {
        $(".load").hide();
        },
        success:function(data) {

                totalPage = data.totalPage;
                console.log(data.list)
                if(currentPage > totalPage){
                      $(".load").hide();
                      $(".loads").show();
                      finished = true;
                      return false;
                }
                currentPage++;
                var dataString = renderHtml(data.list);

                $('#content').append(dataString);
                $("#content").listview("refresh"); 
                $("#content").trigger("create");
                i = 1;
        }
    });
}

  function renderHtml(jsonData){
      var string = '';
      if(jsonData=='' ){
          $(".load").hide();
          $(".loadss").show();

           return false;
      }
      $(".load").hide();
      for(var n = 0; n < jsonData.length; n++){
          string +='<li>';
          string += '<a href="__URL__/details/id/'+jsonData[n].id+'">'+jsonData[n].barcode+'<p>数量:"'+jsonData[n].num+'" 金重:"'+jsonData[n].gold+'"</p> '+jsonData[n].title+'</a>';
          string +='</li>';
      }
      return string;
  }

</script>
  

<h4 style="text-align: center;">更多功能设置请至PC端</h4>

<div data-role="footer" data-position="fixed" data-fullscreen="true">
    <div data-role="navbar">
        <ul>
            <li><a href="{:U('index/index')}"  data-ajax="true"   <?php  if(CONTROLLER_NAME=='Index'){?>class="ui-btn-active ui-state-persist " <?php }?>>工作台</a></li>
            <li><a href="{:U('stock/index')}" data-ajax="false"  <?php if(CONTROLLER_NAME=='Stock'){?>class="ui-btn-active ui-state-persist" <?php }?> >库存</a></li>
            <li><a href="{:U('chukus/index')}" data-ajax="false"   <?php if(CONTROLLER_NAME=='Chukus'){?>class="ui-btn-active ui-state-persist" <?php }?> >出库</a></li>
            <li><a href="{:U('member/index')}" data-ajax="false"   <?php if(CONTROLLER_NAME=='Member'){?>class="ui-btn-active ui-state-persist" <?php }?> >会员</a></li>
        </ul>
    </div>
</div>

</div>
</body>
</html>

<?php
namespace Mobile\Controller;
use Think\Controller;
use Common\Controller\BaseController;
class TestController extends BaseController {
    
	public function index(){
	   $this->display();
	}

	public function iajax(){
		$model = M('test');
		$totalPage =6;
		$page = I('post.page');
		$key = I('post.key');
		if($key){
			$where['barcode'] =array('like','%'.$key.'%');
			$where['title'] =array('like','%'.$key.'%');
			$where['_logic'] = 'or';
		}
		$list = $model->where($where)->limit($page*$totalPage,$totalPage)->select();
		if(empty($list)){
			$list =[];
		}
		$s = $model->count();
		$num =intval($s/$totalPage);
		$arr = array('totalPage'=>$num,'list'=>$list,'key'=>$key,'page'=>$page);
		$data = json_encode($arr);
		echo $data;
	}
}