基於zepto的H5/移動端tab切換觸控拖動載入更多資料

阿新 • • 發佈：2019-01-23

以前實現移動端的滑動載入更多實現的方法是當滾動條快到頁面底部時就自動載入更多的資料，在這方面很多人都用的是"西門的後花園"寫的一個叫dropload的外掛，這個外掛用起來也很好，很感謝西門的後花園作者。我以前在專案中用的也是這個外掛，後來我老大說能不能做成那種向上拖動才會載入更多的效果，不要這種滾動到底部就載入，於是我就使用了iscroll。
以下程式碼是加入了從資料庫讀取資料並判斷資料全部載入完成的效果（事實是隻模擬了從資料庫讀取資料，在使用時可將post請求的url和data換成你自己的就可以了），在本頁的最後附上了模擬的程式碼可供下載檢視。

<!DOCTYPE html>
<html 
>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>基於zepto的移動端/H5觸控拖動載入更多資料</title>
<style>
*{margin:0;padding:0;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box 
;}
body{background:#f1f1f1;color:#666;}
li{list-style-type:none;}
a{text-decoration:none;color:#666;}.tabsNav{overflow:hidden;padding:10px15px;position:fixed;left:0;top:0;width:100%;z-index:2;background:#666;}.tabsNav li{float:left;width:50%;text-align:center;height:30px;line-height:30px;font-size:14px;background 
:#f1f1f1;}.tabsNav li.cur{background:#f00;color:#fff;}.tabs_con{display:none;background:#fff;font-size:12px;}.tabs_con li{height:40px;line-height:40px;border-bottom:1pxsolid#e9e9e9;padding-left:10px;}#wrapper{position:absolute;z-index:1;top:45px;bottom:48px;width:100%;overflow:auto;}#scroller{position:absolute;z-index:1;-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%;}#pullDown, #pullUp{height:40px;line-height:40px;font-size:12px;color:#888;text-align:center;}#pullDown.pullDownIcon, #pullUp.pullUpIcon{position:absolute;margin:8px0030%;width:24px;height:24px;background:url(images/arrow.png)00no-repeat;-webkit-background-size:auto100%;background-size:auto100%;-webkit-transition-property:-webkit-transform;-webkit-transition-duration:250ms;}#pullDown.pullDownIcon{-webkit-transform:rotate(0deg) translateZ(0);}#pullUp.pullUpIcon{-webkit-transform:rotate(-180deg) translateZ(0);}#pullDown.flip.pullDownIcon{-webkit-transform:rotate(-180deg) translateZ(0);}#pullUp.flip.pullUpIcon{-webkit-transform:rotate(0deg) translateZ(0);}#pullDown.loading.pullDownIcon, #pullUp.loading.pullUpIcon{background-image:url(images/loader.png);background-size:100%auto;background-position:0100%;-webkit-transform:rotate(0deg) translateZ(0);-webkit-transition-duration:0ms;-webkit-animation-name:loading;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;}
@-webkit-keyframes loading {from{-webkit-transform:rotate(0deg) translateZ(0);}
    to{-webkit-transform:rotate(360deg) translateZ(0);}
}
</style>
</head>
<body>
<ul class="tabsNav">
    <li class="cur">公告</li>
    <li>訊息</li>
</ul>
<div id="wrapper">          
    <div id="scroller">
        <div class="pullDown" id="pullDown">
            <div class="pullDownIcon"></div><div class="pullDownLabel">下拉重新整理</div>
        </div>
        <div class="tabs_con" style="display:block;">
            <ul></ul>
        </div>      
        <div class="tabs_con">
            <ul></ul>
        </div>
        <div class="pullUp" id="pullUp">
            <div class="pullUpIcon"></div><div class="pullUpLabel">上拉載入更多</div>
        </div>
    </div>          
</div>
<input type="hidden" class="notice_hide">
<input type="hidden" class="msg_hide">
<script src="js/zepto.min.js"></script>
<script src="js/iscroll.js"></script>
<script>var pageNoticeIndex =1,//當前頁
        pageMsgIndex =1,
        pageSize =5,//每頁數量
        load1More =false,//判斷是否全部載入完畢
        load2More =false;//tab切換$('.tabsNav li').on('click',function(){var $this =$(this);
        curIndex =$this.index();$this.addClass('cur').siblings('li').removeClass('cur');$('.tabs_con').eq(curIndex).css("display","block").siblings('.tabs_con').css("display","none");myScroll.scrollTo(0,0);//確保每次切換時scroll回到初始起點myScroll.refresh();//每次切換時都要呼叫介面更新方法if(curIndex ==0){if(!load1More){$("#pullUp").html('<div class="pullUpIcon"></div><div class="pullUpLabel">上拉載入更多</div>');}else{$("#pullUp").html("已無更多資料");}}elseif(curIndex ==1){if(!load2More){$("#pullUp").html('<div class="pullUpIcon"></div><div class="pullUpLabel">上拉載入更多</div>');}else{$("#pullUp").html("已無更多資料");}}});//公告pageNoitce(pageNoticeIndex,0);//初始化載入資料    第一個引數是當前頁，第二個引數是當前選中的tab的索引functionpageNoitce(pageIndex, curIndex) {var html ="";$.post(url, data,function (success) {if (success !=null&&success.status==1) {for (var i =0; i <success.data.length; i++) {
                    html +='<li><a href="#">'+success.data[i].Title+'</a></li>';}var pageCount =parseInt(success.page.totRecord);var page =Math.ceil(pageCount / pageSize);if (page == pageIndex) {
                    load1More =true;}$(".tabs_con").eq(curIndex).children("ul").append(html);}},"json");}//訊息pageMsg(pageMsgIndex,1);functionpageMsg(pageIndex, curIndex) {var html ="";$.post(url, data,function (res) {if (res !=null&&res.status==1) {for (var i =0; i <res.data.length; i++) {
                    html +='<li><a href="#">'+res.data[i].Title+'</i></a></li>';}var pageCount =parseInt(res.page.totRecord);var page =Math.ceil(pageCount / pageSize);if (page == pageIndex) {
                    load2More =true;}$(".tabs_con").eq(curIndex).children("ul").append(html);}},"json");}var myScroll;functionpullDownAction () {setTimeout(function () {myScroll.refresh();},1000);}functionpullUpAction () {setTimeout(function () {var curIndex =$(".cur").index();if(curIndex ==0){if(!load1More){
                    pageNoticeIndex +=1;$(".notice_hide").val(pageNoticeIndex);pageNoitce($(".notice_hide").val(), curIndex);}else{$("#pullUp").html("已無更多資料");}}elseif(curIndex ==1){if(!load2More){
                    pageMsgIndex +=<

 
 
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    基於zepto的H5/移動端tab切換觸控拖動載入更多資料
      
                

以前實現移動端的滑動載入更多實現的方法是當滾動條快到頁面底部時就自動載入更多的資料，在這方面很多人都用的是"西門的後花園"寫的一個叫dropload的外掛，這個外掛用起來也很好，很感謝西門的後花園作者。我以前在專案中用的也是這個外掛，後來我老大說能不能做成那種向上拖動 

  
 

    

    
    使用vue.js  在移動端簡單實現的下拉載入更多  和一些常用的js/jq操作和vueFilter,v-if和v-show運用
      
                
/**需要引入的js與css檔案*/
<script src="${root}/js/jquery.min.js"></script>
<script src="${root}/js/vue.min.js"></script> 

  
 

    

    
    移動端tab切換滑動效果touchslide
      
								
								            
						
                <!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/htm 

  
 

    

    
    移動端tab切換時下劃線的滑動效果
      
                本篇會放置多種下劃線滑動效果，一篇一篇增加，更新中

1、當前 tab 出現下劃線的同時，前一個下劃線同時消失（出現方向與消失方向保持一致），伴隨過渡效果。



<!DOCTYPE html>
<html lang="en">
<head> 

  
 

    

    
    移動端Tab切換
      
							
							
							實現功能


tab點選內容滾動
tab手滑動內容滾動
tab 手滑動內容滾動
根據請求的url引數定位到具體tab 下的具體的item




實現程式碼



<!DOCTYPE html>
<html>

  <head> 

  
 

    

    
    js 移動端 tab切換欄下使用多個Swiper
      
                
做個心得小記錄，引用了bootstrap的tab切換欄和Swiper相結合，需要再每個tab欄下使用一個swiper滾動，每個swiper都要經過初始化，問題就是永遠只有第一個tab欄的swiper生效，第二，三個無效。解決方案如下，在初始化中新增兩個屬性，observer 

  
 

    

    
    小程式上拉載入更多資料，分類切換狀態等例項
      
                
發現很多人對小程式的文章比較好奇，購物車那篇居然佔了快三分一的訪問量，因此寫多篇關於小程式的常用功能。
上拉載入更多其實很簡單，關鍵點只是知道上拉載入是變相的分頁載入，然後通過初始化記錄值和通過陣列來儲存載入過的資料（使用者看回載入過的資料），同樣的每行解析，分類切換的狀態 

  
 

    

    
    基於better-scroll的下拉重新整理上推載入更多
       
 
 目錄 
 前言 
 專案中使用的截圖如下 
 封裝better-scroll 
 元件的使用 
 
 前言 
 本來想使用vux的scroller元件，但是看到官方說不在維護了，而且在提供的樣例裡面，雖然例子有可以自定義載入等待區域以及文字提示的內容，但是實際上卻沒有找到相關樣例程式碼，改來改去也改 

  
 

    

    
    vue+better-scroll實現多tab選項卡上拉載入更多的實踐例子
      
                 閒話少說，先上效果



專案中會經常遇到類似這樣的多tab切換的需求，tab可以點選，可以滑動。每個tab的內容還需要上拉載入重新整理。

沒有辦法，好好研究一下，做個記錄。以防來日不時之需。



專案中上拉載入用到了很好用的工具better-scroll,各位可能都知 

  
 

    

    
    移動端tab滑動和上下拉刷新加載
      ldo   swiper   手勢   lock   red   height   direction   不清楚   log   移動端tab滑動和上下拉刷新加載
查看demo（請在移動端模式下查看）
查看代碼

開發該插件的初衷是，在做一個項目時發現現在實現移動端tab滑動的插件大多基於swiper，sw 

  
 

    

    
    基於VUE移動端UI好用框架
      1. vonic 一個基於 vue.js 和 ionic 樣式的 UI 框架，用於快速構建移動端單頁應用，很簡約，是我喜歡的風格 star 2.3k

 中文文件 線上預覽
 
 2.vux 基於WeUI和Vue(2.x)開發的移動端UI元件庫 star 10k
 基於webpack+vue-loader+v 

  
 

    

    
    移動端vue切換路由滾動條恢復到頂部
       
 
  
  
 問題描述：vue是單頁面應用。導致路由切換之後，之前的滾動距離會一直存在，頁面沒有到頂部。 
  
  網上大部分的解決方案是利用路由的afterEach方法解決，如下所示， 
  
 router.afterEach((to,from,next) => {
  window.sc 

  
 

    

    
    Vue實現移動端頁面切換效果
      找了好多部落格實現效果都……emmm…… 
  
應用Vue自帶的過渡 《 進入/離開 & 列表過渡 》和 巢狀路由 和 fixed定位實現 
其實還是挺簡單的。 
在子頁面把整個頁面做絕對定位，覆蓋整個螢幕，子父頁面將 router-view 用&n 

  
 

    

    
    解決微信小程式的wx-charts外掛tab切換時的顯示會出現位置移動問題-tab切換時，圖表顯示錯亂-實現滑動tab
       
 
  
  
 解決Echarts在微信小程式tab切換時的顯示會出現位置移動問題 
 我的js 
 var dateTimePicker = require('../../utils/dateTimePicker.js');
var wxCharts = require('../../utils/wx 

  
 

    

    
    基於vue移動端UI框架
      
							
							
							1.vux 基於WeUI和Vue(2.x)開發的移動端UI元件庫

基於webpack+vue-loader+vux可以快速開發移動端頁面，配合vux-loader方便你在WeUI的基礎上定製需要的樣式。
中文文件 線上預覽

特性


star數最多
這可能跟 

  
 

    

    
    移動端滑動切換元件封裝  vue-swiper-router
      
                元件部分<template>
    <div class="main">
        <div class="page-tab">
            <div 
                :class="nowPat 

  
 

    

    
    vue移動端滑動切換圖片的一個簡單思路
      
							
							
							最近想仿一下美團app裡的榛果民宿，當做移動端的練習。github地址在這裡，還沒做完。
按照app裡的圖片切換效果想了一個簡單的實現思路，在這個基礎上做更復雜一點更炫酷一點的輪播應該也是可以的。效果如圖。

程式碼其實很簡單，
<div id="slid 

  
 

    

    
    簡單的pc端與移動端的切換效果
      
								
								            
							
							
							下列程式碼中，如果需要進行pc端與移動端的切換，直接將script中的程式碼貼上複製就好，只是要注意改變跳轉的網址。

<!DOCTYPE html>
<html>
<he 

  
 

    

    
    移動端tab欄中巢狀輪播圖
      
                問題：最近寫一個移動端的專案，其中一個頁面是每個tab欄的內容區均為一個輪播圖，用的是swiper實現的輪播圖效果，但是寫完之後發現，只有第一個tab欄對應的swiper是有效果的，切換後就無法實現輪播的效果。

解決方法：

方法一（推薦）：

在初始化swiper物件的時 

  
 

    

    
    基於浮動的移動端兩列可延時載入的瀑布流佈局
      
							
							
							由於工作需要需要寫一個移動端可以延時載入的瀑布流佈局頁面，於是開始查資料，百度，對瀑布流有了一些理解，一直以來都有寫部落格的想法，於是有了這篇博文！

幾點說明 
1.本文所說的瀑布流指的是等寬不等高的瀑布流 
2.本問純屬記錄用，筆者水平有限，如有錯誤歡迎指正