iscroll 下拉刷新

最新推荐文章于 2021-11-12 21:20:57 发布

无处安放的前端

最新推荐文章于 2021-11-12 21:20:57 发布

阅读量1.3k

点赞数

分类专栏：笔记整理 js php

本文链接：https://blog.csdn.net/qq_43512502/article/details/96200457

版权

笔记整理同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

26 篇文章 0 订阅

订阅专栏

php

2 篇文章 0 订阅

订阅专栏

前端代码部门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="iscroll-probe.js"></script>
    <script src="template-web.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: none;
            list-style: none;
        }

        body {
            font-size: 14px;
            font-family: "MicroSoft YaHei", sans-serif;
            overflow: hidden;
        }

        .header, .footer {
            position: absolute;
            left: 0;
            height: 45px;
            line-height: 45px;
            text-align: center;
            width: 100%;
            background: #ccc;
            color: #333;
            z-index: 99;
        }

        .header {
            top: 0;
        }

        .footer {

            bottom: 0;
        }

        .wrapper {
            position: absolute;
            left: 0;
            top: 0px;
            bottom: 0;
            width: 100%;
        }

        .wrapper li {
            width: 80%;
            margin: 0 auto;
            margin-top: 10px;
            padding: 10px 10px;
            border-bottom: 1px solid #ccc;
        }

        .pullDown, .pullUp {
            text-align: center;
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body><div class="header">顶部的数据 朋友圈</div>
<div class="wrapper">
    <div class="scoller">
        <div class="pullDown">
            <img style="display: none;" width="44" src="./images/loading.gif" alt=""><span
                style="margin-left: 5px;height: 54px;line-height:54px;">下拉刷新</span>
        </div>
        <ul class="content">
          <li>
            <p>你好啊</p>
            <img src="../api/img/5d2b4c00a47d4.jpg" alt="">
          </li>
            <li>
                <p>你好啊</p>
                <img src="../api/img/5d2b4c00a47d4.jpg" alt="">
            </li>
            <li>
                <p>你好啊</p>
                <img src="../api/img/5d2b4c00a47d4.jpg" alt="">
            </li>
            <li>
                <p>你好啊</p>
                <img src="../api/img/5d2b4c00a47d4.jpg" alt="">
            </li>
            <li>
                <p>你好啊</p>
                <img src="../api/img/5d2b4c00a47d4.jpg" alt="">
            </li>
        </ul>
        <!--滚动加载的图标-->
        <div class="pullUp">
            <img style="display: none;" width="44" src="./images/loading.gif" alt=""> <span>滚动加载</span>
        </div>
    </div>
</div>
<div class="footer">底部的数据，讲师数据各种show</div>
<script type="text/html" id="mydata">
    {{each rows as value}}
    <li>
        <p>{{value.username}}</p>
        <img src="{{value.lifephoto}}" alt="">
    </li>
    {{/each}}
</script>

<script>
    let iscroll = new IScroll(".wrapper", {
        scrollbars: true,//让当前的元素出现滚动条
        probeType: 2
    });
    let down;
    let up=false;
    iscroll.on("scroll", function () {
        //对这个y值进行判断
        let distince=this.y;
        if (distince > 60) {
            down = true;
            document.querySelector(".pullDown img").style.display = "inline-block";
            document.querySelector(".pullDown span").classList.add("loading");
        }
        //滚动加载..  这个判断相当来说要麻烦一些.
        //我要获取内容的高度，我要获取窗口的高度，我要获取滚动的距离.
        let contentHeight=$(".content").height();
        let winHeight=$(window).height();
        if((winHeight+Math.abs(distince))-contentHeight>130){
            console.log("释放加载   ")
            document.querySelector(".pullUp span").innerHTML="释放加载";
            up=true;
        }
    })
    params = {page:1,pageSize:5}
    let render=function (){
        $.ajax({
            url:"../api/queryTeacher.php",
            type:"get",
            data:params,
            dataType:"json",
            success:function(data){
                console.log(data);
                let html = template("mydata",data);
                $(".content").append(html);
                //重新刷新界面 refresh
                iscroll.refresh();
            }
        })

    }

    iscroll.on("scrollEnd",function(){
        //在这里滚动结束之后，根据用户的行为进行具体的代码实现.
        if(down){
            document.querySelector(".pullDown span").innerHTML="下拉刷新";
            down=false;
            //请求数据
            params.page=1;
            render();
        }
        if(up){
            up=false;
            document.querySelector(".pullUp span").innerHTML="滚动加载";
            //加载数据.
            //加载数据.
            params.page++;
            render();
        }

    });
</script>
</body>
</html>

后端接口代码

<?php 
 $coon = @mysqli_connect('127.0.0.1','root','123123','php_db');
  if(!$coon){
    exit("连接数据库失败");
  }

	/*
		分页数据查询
			page  当前页
			pageSize 每页显示多少条

	 */
	if (empty($_GET['page'])) {
		$currentPage = 1;
	}else{
		$currentPage = $_GET['page'];
	}
	if (empty($_GET['pageSize'])) {
		$pageSize = 5;
	}else{
		$pageSize = $_GET['pageSize'];
	}
	
	$startIndex = ($currentPage-1)*$pageSize;
	$endIndex = $pageSize;
	$sql = "select * from lecturerMessage limit ".$startIndex." , ".$endIndex;
  	$query = mysqli_query($coon,$sql);

	$sqlcount = "select count(1) as count from lecturerMessage";
	$teachercount = mysqli_query($coon,$sqlcount);
	
  if (! $query) {
    exit("数据查询失败");
   }  

   $teacherlist=array();
   while ( $item = mysqli_fetch_assoc($query)){
   		$teacher = array('id' => $item['id'], 'username' => $item['username'],'age' => $item['age'],'lseeon' => $item['lseeon'],'lifephoto' => $item['lifephoto'],'desc' => $item['desc']);
   		array_push($teacherlist,$teacher);
   }
   $mycount = 0;
	while ( $item = mysqli_fetch_assoc($teachercount)){
		 $mycount = $item['count'];
	}

   $json = array('rows' => $teacherlist, 'total' => $mycount);
   echo json_encode($json);
 ?>

无处安放的前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iscroll 下拉刷新

前端代码部门<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.min.js"></script> <...
复制链接

扫一扫

专栏目录