zoukankan      html  css  js  c++  java
  • (效果一)js实现上拉加载

    实现思路:获取滚动元素的高度,滚动条距离顶部的距离,滚动条的高度,
    算式:可视窗口的高度 + 滚动条距离顶部的距离 == 滚动条的高度就说明到底部。
    HTML
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>项目查询</title>
    <link rel="stylesheet" href="xmcx.css">
    </head>
    <body>
    <div class="wraper">
    <div class="header">
    <div class="search"><a href=""><img src="image/search.png" alt="">请输入名称进行搜索</a></div>
    <div class="tab">
    <div class="nav active"><a href="javascript:;">药品价格</a></div>
    <div class="nav"><a href="javascript:;">非药品价格</a></div>
    </div>
    </div>
    <div class="section">
    <div class="med-hd">
    <div class="name pink">名称</div>
    <div class="guige pink">规格</div>
    <div class="yblx pink">医保类型</div>
    <div class="jine oriange">金额</div>
    </div>
    <div class="med-bd focus">
    <div class="row">
    <div class="name a">小儿复方氨酚烷胺颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿复方氨酚烷胺颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿复方氨酚烷胺颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿复方氨酚烷胺颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿复方氨酚烷胺颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿复方氨酚烷胺颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿复方氨酚烷胺颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿复方氨酚烷胺颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿复方氨酚烷胺颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿复方氨酚烷胺颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿复方氨酚烷胺颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿复方氨酚烷胺颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿复方氨酚烷胺颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    </div>
    <div class="med-bd">
    <div class="row">
    <div class="name a">小儿咽扁颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿咽扁颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿咽扁颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿咽扁颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿咽扁颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿咽扁颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿咽扁颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿咽扁颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿咽扁颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿咽扁颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿咽扁颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿咽扁颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    <div class="row">
    <div class="name a">小儿咽扁颗粒</div>
    <div class="guige">60ml/瓶</div>
    <div class="yblx cir">甲类</div>
    <div class="jine">35.5</div>
    </div>
    </div>
    </div>
    </div>
    <script src="xmcx.js"></script>
    </body>
    </html>
    

      

     
    CSS3
    /*项目查询*/
    body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{
    margin:0;
    padding:0;
    }
    html {
    font-size: 26.67vw;
    }
    html,body{
    height: 100%;
    }
    .wraper{
    height: 100%;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    background-color: #f1f1f1;
    }
    a {
    text-decoration: none;
    }
     
    a:link{
    color: #404040;
    }
    a:visited{
    color: #404040;
    }
    a:hover{
    color: #404040;
    }
    a:active {
    color: #404040;
    }
    ul,ol{
    list-style:none;
    }
    img{
    border: 0;
    display: block;
    }
     
    .header{
     100%;
    height: 214px;
    height: 1.07rem;
    }
    .header .search {
     100%;
    height: 120px;
    height: 0.6rem;
    background-color: #ff4f8d;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff4f8d;
    box-sizing: border-box;
    padding: 0.1rem 0.09rem;
    }
    .header .search a {
    display: flex;
     100%;
    height: 100%;
    border-radius: 8px;
    align-items: center;
    font-size: 0.14rem;
    box-sizing: border-box;
    color: #fff;
    background-color: #e6477f;
    }
    .header .search img {
     0.15rem;
    height: 0.15rem;
    margin: 0 0.14rem 0 0.12rem;
    vertical-align: middle;
    }
    .tab {
     100%;
    height: 0.45rem;
    background-color: #fff;
    box-sizing: border-box;
    border-top: 1px solid #f1f1f1;
    display: flex;
    align-items: center;
    }
    .tab .nav {
     50%;
    height: 100%;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 4px solid transparent;
    font-size: 0.17rem;
    }
    .tab .nav.active {
    border-bottom: 4px solid #ff4f8d;
    }
    .tab .nav.active a {
    color: #ff4f8d;
    }
    .tab .nav a {
    color: #404040;
    }
    .medical-hd {
     100%;
    }
    .section{
     100%;
    /*height: 100%;*/
    flex: 1;
    background-color: #f1f1f1;
    padding: 20px 24px 0;
    padding: 0.1rem 0.12rem 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    }
    .med-hd {
     100%;
    height: 70px;
    height: 0.35rem;
    box-sizing: border-box;
    color: #fff;
    font-size: 28px;
    font-size: 0.14rem;
    display: flex;
    align-items: center;
    text-align: center;
    }
    .name {
     242px;
     1.21rem;
    border-right: 1px solid #f2f2f2;
    box-sizing: border-box;
    }
    .guige {
     148px;
     0.74rem;
    border-right: 1px solid #f2f2f2;
    box-sizing: border-box;
    }
    .yblx {
     161px;
     0.85rem;
    }
    .jine {
     151px;
     0.755rem;
    }
    .name,.guige,.yblx,.jine {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .pink {background-color: #ff4f8d;}
    .oriange {background-color: #ff990a;}
     
    .med-bd{
     100%;
    flex: 1;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    display: none;
    }
    .med-bd.focus{
    display: block;
    }
    .med-bd .row{
     100%;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 0.14rem;
    color: #404040;
    border-bottom: 1px solid #f2f2f2;
    }
    .row div {
    overflow: hidden;
    height: auto;
    min-height: 0.45rem;
    _height: 0.45rem;
    /*padding: 0.1rem 0.95rem;*/
    box-sizing: border-box;
    }
    .cir {
    border-right: 1px solid #f2f2f2;
    }
    .a {
    padding-left: 0.1rem;
    box-sizing: border-box;
    }
    

      

     
    JS
    function ajax({type,data,url,async=true,beforeSend,success,complete}){
    // 创建xhr对象
    let xhr = new XMLHttpRequest();
    // 判断传入的数据的类型 为对象或者字符串
    if(typeof data === 'object'){
    // 遍历且进行拼接 组成格式为 a=b&c=d;
    var str = '';
    for(var sAttr in data){
    str += encodeURIComponent(sAttr) + '=' + encodeURIComponent(data[sAttr]) + '&';
    }
    // 裁剪最后一个&符号
    data = str.slice(0,-1);
    }
    // 数据的提交方式强制转化为答谢的提交方式
    if(type.toUpperCase() === 'GET' && data){
    url += '?' + data;
    }
    // 配置
    xhr.open(type,url,async);
    // 接收后台返回的数据
    xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
    if(xhr.status === 200){
    success && success(xhr.responseText);
    }
    complete && complete();
    }
    };
    beforeSend && beforeSend();
    if(type.toUpperCase() === 'POST'){
    // 如果为post提交方式 在发送前将内容类型设置为application/x-www-form-urlencoded
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send(data);
    } else {
    xhr.send();
    }
    }
    /*
    * 项目查询
    * oNav: tab切换标题
    * oCont: tab切换内容
    * */
    var oNav = document.querySelectorAll('.nav');
    var oCont = document.querySelectorAll('.med-bd');
    oNav[0].onclick = function () {
    this.className = 'nav active';
    oNav[1].className = 'nav';
    oCont[0].className = 'med-bd focus';
    oCont[1].className = 'med-bd';
    };
    oNav[1].onclick = function () {
    this.className = 'nav active';
    oNav[0].className = 'nav';
    oCont[1].className = 'med-bd focus';
    oCont[0].className = 'med-bd';
    };
     
    oCont.forEach(function (item,index,array) {
    item.onscroll = function(){
    console.log(item.scrollHeight + 'px');
    console.log(item.scrollTop + 'px');
    console.log(item.clientHeight + 'px');
    if(item.clientHeight + item.scrollTop == item.scrollHeight) {
    console.log("已经触底,请求数据");
    ajax({
    type: "GET",
    data: "",
    url: "",
    success: function () {
    console.log("请求数据成功执行")
    }
    })
    }
    }
    });
     
    注:这里需要调用后台接口,这里我只封装了ajax。需要的小伙伴加上接口就可以
  • 相关阅读:
    Educational Codeforces Round 88 (Rated for Div. 2) D. Yet Another Yet Another Task(枚举/最大连续子序列)
    Educational Codeforces Round 88 (Rated for Div. 2) A. Berland Poker(数学)
    Educational Codeforces Round 88 (Rated for Div. 2) E. Modular Stability(数论)
    Educational Codeforces Round 88 (Rated for Div. 2) C. Mixing Water(数学/二分)
    Codeforces Round #644 (Div. 3)
    Educational Codeforces Round 76 (Rated for Div. 2)
    Educational Codeforces Round 77 (Rated for Div. 2)
    Educational Codeforces Round 87 (Rated for Div. 2)
    AtCoder Beginner Contest 168
    Codeforces Round #643 (Div. 2)
  • 原文地址:https://www.cnblogs.com/bgwhite/p/9375540.html
Copyright © 2011-2022 走看看