2. 程式人生 > 實用技巧 >h5巢狀下拉重新整理

h5巢狀下拉重新整理

阿新 • • 發佈：2020-07-25

前端在工作當中難免會於原生的安卓和ios合作，去做一些H5巢狀的頁面。但是實際開發中常常會遇到各種相容問題，具體問題我就不一一列舉了，這次我主要分享的是關於在原生中下拉重新整理中雙系統出現的相容問題，最典型的就是在ios中會出現下拉彈簧這會大大增加前端在開發中遇到的奇特問題，所以本文結合實際，對此做些功能上的實現，也希望大家可以看過我實現原理後理解並運用到實際的開發過程中，真正做到舉一反三，貨不多說直接上程式碼。

首頁css+html部分

    *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
    body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    .one{
        width : 4rem;
        height: 7rem;
        border: 1px solid red;
        font-size: 0.35rem;
        box-sizing: border-box;
        overflow-y: auto;
       }
    .kl{
        position: relative;
       }
    .lis{
        width: 100%;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        background: red;
      }
    .lis:nth-child(2n+1){
    background: pink;
      }
    .scroll{
        height:100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        }
    .di{
    position: relative;
    color: #c8c9cc;
    font-size: 0;
    vertical-align: middle;
    }
    .k{
    width: 0.5rem;
    height: 0.5rem;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    animation: theanimation 1s linear infinite;
    }
    .us{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   color:rgb(25, 137, 250)
    }
    .us:before{
    display: block;
    width: 2px;
    height: 25%;
    margin: 0 auto;
    background-color: currentColor;
    border-radius: 40%;
    content: ' ';
    }
    .us:nth-child(1){
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    opacity: 1;
    }
    .us:nth-child(2){
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    opacity: 0.9375;
    }
    .us:nth-child(3){
        -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0.875;
    }
    .us:nth-child(4){
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
    opacity: 0.8125;
    }
    .us:nth-child(5){
        -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
    opacity: 0.75;
    }
    .us:nth-child(6){
        -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    opacity: 0.6875;
    }
    .us:nth-child(7){
        -webkit-transform: rotate(210deg);
    transform: rotate(210deg);
    opacity: 0.625;
    }
    .us:nth-child(8){
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg);
    opacity: 0.5625;
    }
    .us:nth-child(9){
        -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    opacity: 0.5;
    }
    .us:nth-child(10){
        -webkit-transform: rotate(300deg);
    transform: rotate(300deg);
    opacity: 0.4375;
    }
    .us:nth-child(11){
    -webkit-transform: rotate(330deg);
    transform: rotate(330deg);
    opacity: 0.375;
    }
    .us:nth-child(12){
         -webkit-transform: rotate(360deg); 
    transform: rotate(360deg);
    opacity: 0.3125;
    }
    @keyframes theanimation{ 
  from {   transform: rotate(0deg);} 
    to { transform: rotate(360deg);} 
     }

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉重新整理</title>
<link rel="stylesheet" type="text/css" href="botm_x.css"/>
</head>
<style type="text/css">



 </style>
	<body>
		<div class="one" >
			<div class="kl">
			<li class="lis">這是一個內容</li>
 
			<li class="lis">這是一個內容</li>
			<li class="lis">這是一個內容</li>
			<li class="lis">這是一個內容</li>
		    <li class="lis">這是一個內容</li>
		 	<li class="lis">這是一個內容</li>
		    <li class="lis">這是一個內容</li>
			<li class="lis">這是一個內容</li>
			<li class="lis">這是一個內容</li>
 
			<li class="lis">這是一個內容</li>
			<li class="lis">這是一個內容</li>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="適配.js"></script>
	<script type="text/javascript" src="下拉重新整理.js"></script>
</html>




這裡是模擬了一個簡單的下拉重新整理的模板。






接下來是js部分也是最主要的部分



window.loading = function() {
	var sin = 0;
	var sel = null; //計時器
	var br = true; //判斷是否請求完所有的資料
	var bl = true; //判斷是否ios an
	var all_H; //下拉高度
	var xl_xu, sl_xu; //下拉選和上拉選
	var str;
	let box = document.getElementsByClassName('one')[0] //獲取到整個的body
	let box_childer = document.getElementsByClassName('kl')[0]
	let li = document.querySelectorAll('li') //所有的li
	box.addEventListener('touchstart', start) //摁下事件
	box.addEventListener('scroll', (e) => scrol(e)) //移動事件
	box.addEventListener('touchend', end) //摁下離開事件
	//	box.addEventListener('touchmove',move_lin)//拖拽事件
	function scrol(e) { //滾動事件
		let move_scroll = br && bl ? e.target.scrollTop : NaN
		all_H = box.clientHeight + move_scroll
		if(all_H >= e.target.scrollHeight) { //觸底了
			bl = false
			if(sin ^ 3) {
				++sin
			} else {
				if(xl_xu) {
					return
				}
				establish(2)
				return false
			}
			br = false
			//建立一個節點來顯示所示內容
			establish();
		}
	}
	function end() { //滑鼠離開事件bl = true}
	function start(e) { //摁下事件bl = true}
	function establish(a = 0) { //建立dom載入元素
		if(a == 2) { //說明是最後一頁
			xl_xu = document.createElement('div');
			xl_xu.style.textAlign = 'center'
			xl_xu.innerHTML = '已經最後一頁了'
			box_childer.appendChild(xl_xu)
			return
		}
		if(xl_xu) { //說明有 那就先刪除
			box_childer.removeChild(xl_xu)
		}
		xl_xu = document.createElement('div')
		xl_xu.style.textAlign = 'center'
		xl_xu.innerHTML = str
		box_childer.appendChild(xl_xu)
		sel = setTimeout(() => {
			box_childer.removeChild(xl_xu)
			xl_xu = null
			clearTimeout(sel);
			let a = Array.from({length: 5}, _ =>document.createElement('li'))
			for(let i = 0;i<a.length; i++)	{
				a[i].classList.add('lis') 
				box_childer.appendChild(a[i])
				}
			sel = null
			br = true
		}, 1500)
	}
	function move_lin(e) { //託轉事件
		if(!br) {
			var eve = e || event
			var touch = eve.touches[0]
			var clientW = box.scrollWidth;
			var clientH = box.clientHeight
			var start_y = (750 / clientW) * (touch.pageY) / 75 //距離當前頁面的高度
			var start_x = (750 / clientW) * (touch.pageX) / 75 //距離當前頁面的寬度
			console.log(start_y, start_x)
		}
		//		console.log('託轉了',box_childer,all_H)
	}
	(function() {
		str =`<div class="di"'>
			<div class="k">      這裡我寫了一個載入的dom滾動動畫一會實際可以看下效果
			<li class="us"></li>
			<li class="us"></li>
			<li class="us"></li>
			<li class="us"></li>
			<li class="us"></li>
			<li class="us"></li>
			<li class="us"></li>
			<li class="us"></li>
			<li class="us"></li>
			<li class="us"></li>
			<li class="us"></li>
			<li class="us"></li>
			</div></div>`
	})()
}()





整個程式碼的思想不是簡單意義上的根據滾動長度和實際高度做判斷，以為開頭說過ios這方面會有彈簧的一個特性，所以不能這麼判斷，我這邊通過監聽摁下鬆開事件來多上了一層鎖，這樣更加的安全和高效。


下面是我的效果演示，實際開發中可根據自己的用途來修改程式碼




   
 
 
 

             
          

            
  

           

               
              
             

            

            

            
相關推薦

			   
            
            
            
 

    


    
    
h5巢狀下拉重新整理

    
前端在工作當中難免會於原生的安卓和ios合作，去做一些H5巢狀的頁面。但是實際開發中常常會遇到各種相容問題，具體問題我就不一一列舉了，這次我主要分享的是關於在原生中下拉重新整理中雙系統出現的相容問題，最典型
 


  
 

    


    
    
解決vant框架做H5時踩過的坑(下拉重新整理、上拉載入等)

    
1. 頁面在手機端不能上下滑動，在PC端瀏覽器正常滑動
說明：在設定了overflow:auto;屬性的前提下，H5頁面在PC端瀏覽器裡展示可以上下滑動，在ios上可正常滑動，在安卓手機 上不能上下滑動；這現象並不是ios和安卓相容
 


  
 

    


    
    
Flutter 實現下拉重新整理上拉載入的示例程式碼

    
本文介紹了Flutter 實現下拉重新整理上拉載入的示例程式碼，分享給大家，具體如下：
 


  
 

    


    
    
vue實現網路圖片瀑布流 + 下拉重新整理 + 上拉載入更多(步驟詳解)

    
一、思路分析和效果圖

　　用vue來實現一個瀑布流效果，載入網路圖片，同時有下拉重新整理和上拉載入更多功能效果。然後針對這幾個效果的實現，捋下思路：
 


  
 

    


    
    
android RecycleView實現下拉重新整理和上拉載入

    
android 的下拉重新整理，上拉載入功能，翻頁時顯示從第1頁開始到當前頁面的內容，並且當前顯示的是當前頁的內容；
 


  
 

    


    
    
上拉載入+下拉重新整理

    
import { PullRefresh } from \'vant\';
Vue.use(PullRefresh);data 部分:
pageNum: 1,pageSize: 6,all_rows:[],all_total:\"\",loading: false,finished: false,refreshing: false,/*是否處於載入中,false 就是去掉
 


  
 

    


    
    
運用better-scroll 封裝上拉載入更多，下拉重新整理功能

    
/* 引用方式
*<scroll
:pullDown=\"true\"
:pullUpLoad=\"pullUpLoad\"
:list=\"transactionList\"
@pullingUp=\"pullingUp\"
 


  
 

    


    
    
下拉重新整理載入資料，篩選條件點選載入對應資料，搜尋input框得到對應資料

    
移動端頁面的下拉重新整理，用到jquery和layui的彈窗，layui的下拉重新整理配合上條件篩選有點難搞，所以沒有用，原生js寫的，有用到的話可以採納
 


  
 

    


    
    
Flutter如何實現下拉重新整理和上拉載入更多

    
https://blog.csdn.net/huangxiaoguo1/article/details/85603172
效果
下拉重新整理

如果實現下拉重新整理，必須藉助RefreshIndicator，在listview外面包裹一層RefreshIndicator，然後在RefreshIndicator裡面實
 


  
 

    


    
    
手把手教學~基於element封裝tree樹狀下拉框

    
在日常專案開發中，樹狀下拉框的需求還是比較常見的，但是element並沒有這種元件以供使用。在這裡，小編就基於element如何封裝一個樹狀下拉框做個詳細的介紹。
 


  
 

    


    
    
vue+vant實現上拉載入下拉重新整理（訪問後臺邏輯）

    
如何引入vant就不細講了，官網講的很詳細。實在不會去百度搜一下吧
官網：https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/quickstart
 


  
 

    


    
    
mui——下拉重新整理上拉載入

    
效果展示：
1.雙頁面banShiZhiNan.html（主頁面） banShiZhiNan_sub.html（子頁面）
banShiZhiNan.html
 


  
 

    


    
    
Android-----下拉重新整理整合到專案中

    
在app.gradle中新增依賴：compile \'in.srain.cube:ultra-ptr:1.0.11\' //下拉重新整理
佈局檔案：
 


  
 

    


    
    
Android實現簡單的下拉重新整理控制元件

    
背景：列表控制元件在Android App開發中用到的場景很多。在以前我們用ListView，GradView，現在應該大多數開發者都已經在選擇使用RecyclerView了，谷歌給我們提供了這些方便的列表控制元件，我們可以很容易的使用它們
 


  
 

    


    
    
下拉重新整理 + 上拉重新整理 （2）

    
>>> 
1、好了，準備工作搞定，先來實現下拉重新整理 
 ViewController.h 繼承 UITableViewController，並有一個 data 來存放資料並顯示
 


  
 

    


    
    
下拉重新整理 + 上拉重新整理 （1）

    
>>> 

1、做一件前先問一下，what，why，how。
a）what：什麼是下拉重新整理，其實你經常看見，比如新浪微博手指往下滑時重新整理微博；那什麼是上拉重新整理，上拉重新整理實際也就是分頁模式，
 


  
 

    


    
    
vue移動端下拉重新整理和上滑載入

    
本文例項為大家分享了vue移動端下拉重新整理和上滑載入的具體程式碼，供大家參考，具體內容如下
 


  
 

    


    
    
uni-app 動態控制下拉重新整理

    
掃碼檢視原文，搜尋uni-app 動態控制下拉重新整理：

前置條件：
開發環境：windows
 


  
 

    


    
    
mui實現下拉重新整理以及click事件無法響應問題

    
直接上乾貨

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
 


  
 

    


    
    
小程式下拉重新整理

    
enablePullDownRefresh
enablePullDownRefresh是最容易實現下拉重新整理的方法，在json檔案中將enablePullDownRefresh設定為true，在Page中監聽onPullDownRefresh事件即可，支援點選頂部標題欄回到頂部，自定義標題欄