2. 程式人生 > >使用better-scroll配合vue實現上拉載入下拉重新整理元件

使用better-scroll配合vue實現上拉載入下拉重新整理元件

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

前提背景:大前端的時代造就了前端的業務邏輯越來越重，原有的MVP設計開發模式(jquery時代)造成了前端介面和資料操作都集中在MVP模式中的P層架構即控制器上，P層承擔了大量的邏輯程式碼和操作檢視DOM程式碼，兩者互動在一起耦合性很強並且很重，而V(檢視層)、M(資料層)的比重很輕，這對於業務功能越來越複雜的前端應用來說，大型的應用程式使用MVP模式已經不再是很好的選擇。MVVM模式的誕生給我們構建複雜應用程式提供了極佳的管理模式和開發模式，VM層替代了原有的P層，它自動的處理dom和資料之間的關係，從而將我們把注意力集中在M層。隨著MVVM越來越流行，遵循MVVM模式的Angular、React、Vue三大框架的應運而生，為我們開發大前端應用提供了極大的便利性。下面通過一小段程式碼對比MVP模式和MVVM之間的區別：

程式目標:實現簡單的todolist效果:

MVP設計模式實現程式碼:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 <title>jquery todolist</title>
 <script src="../js/jquery-3.2.1.js"></script>

</head>
<body>
<div>
 <input id="input" type="text">
 <button id="btn">提交</button>
 <ul id="list"></ul>
</div>
</body>
<script>
 /*
 * jquery開發遵循MVP模式，M模型 V檢視 P控制器*/
 // js建構函式
 function Page() {

 }
 // 給Page物件例項增加一個方法init,呼叫bindEvents()方法,這個方法給button繫結一個點選事件

 // $.proxy()方法將this.handleBtnClick()方法繫結到this即page例項
 $.extend(Page.prototype, {
   init: function () {
     this.bindEvents();
   },
   bindEvents: function () {
     var btn = $("#btn");
     btn.on('click', $.proxy(this.handleBtnClick, this));
   },
   handleBtnClick: function () {
     var inputElem = $("#input");
     var inputVal = inputElem.val();
     var ulElem = $("#list");
     if(!inputVal){
       window.alert('你輸入的內容為空，不允許新增!');
       return;
     }
     ulElem.append('<li>' + inputVal + '</li>');
     inputElem.val('');
   }
 });
 // 例項化物件呼叫方法
 var page = new Page();
 page.init();
</script>

</html>

MVP模式寫的程式碼可以看出大量的邏輯程式碼和操作dom的程式碼交織在P控制層裡，使用jquery開發遵循MVP模式的專案裡，60%-70%的程式碼都和dom操作有關，造成了前端程式碼很重並且容易出錯。

MVVM模式實現同樣效果，使用vue框架實現:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 <title>vue 實現todolist</title>
 <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
 <input v-model="inputVal" type="text">
 <button v-on:click="handleBtnClick">提交</button>
 <ul>
   <li v-for="(item,index) in list" :key="index">{{item}}</li>
 </ul>
</div>
</body>
<script>
 var app = new Vue({
   el: "#app",
   data: {
     inputVal: '',
     list: []
   },
   methods: {
     handleBtnClick: function () {
       this.list.push(this.inputVal);
       this.inputVal = '';
     }
   }

 });

</script>

</html>

MVVM模式包含檢視層(V)、資料層(M)、VM(層)，不在包含控制器P層，而VM層是VUE框架內部實現的，我們不需要關心，通過上述例項可以看出我們進行的都是對資料的處理，資料發生改變，dom結構隨之發生變化，VM層就是實現這一過程的機制。

再來引入一個思想：前端元件化思想，前端頁面的每個可視區域都可以看做是一個個元件構成的，元件化的好處是當我們的前端介面功能複雜時，我們可以拆分成一個個元件，然後在每個元件裡寫相應的dom結構，js，css等，通過webpack等工程化工具使我們的元件組合成一個大介面，方便我們以後的維護和程式碼的複用，而我們所要做的上拉重新整理下拉載入元件就是基於這一思想和vue的模式來實現的。

     先來認識一下better-scrol，該專案的github地址是，點選開啟連結

外掛作者是黃軼黃軼，引用作者的一篇文章當better-scroll遇見vue，裡面詳細解釋了better-scroll的滾動原理和上拉載入，下拉重新整理所需的API，

廢話不多說，直接貼原始碼，親測可以完美正常使用！

scroll.vue

<template>
 <div class="scroll-wrapper" ref="wrapper">
   <div class="scroll-main">
<!-- 頂部提示資訊 -->
<div class="top-tip">
       <div class="refresh-top"><span v-show="IsRefresh" class="icon-jiazai"></span><span
class="refresh-hook">下拉重新整理</span></div>
     </div>
     <slot></slot>
     <div class="bottom-tip">
       <span v-show="IsLoading" class="icon-jiazai"></span><span class="loading-hook">檢視更多</span>
     </div>
   </div>
   <div class="refresh-success alert-hook">重新整理成功</div>
 </div>
</template>

<script type="text/ecmascript-6">
import BScroll from 'better-scroll';

 export default {
   props: {
     /**
      * 1 滾動的時候會派發scroll事件，會截流。
* 2 滾動的時候實時派發scroll事件，不會截流。
* 3 除了實時派發scroll事件，在swipe的情況下仍然能實時派發scroll事件
*/
probeType: {
       type: Number,
default: 1
},
/**
      * 點選列表是否派發click事件
*/
click: {
       type: Boolean,
default: true
},
/**
      * 是否開啟橫向滾動
*/
scrollX: {
       type: Boolean,
default: false
},
/**
      * 是否派發滾動事件
*/
listenScroll: {
       type: Boolean,
default: false
},
/**
      * 列表的資料
*/
data: {
       type: Array,
default: null
},
/**
      * 標識列表的資料是否為空
*/
flag: {
       type: Boolean,
default: false
},
/**
      * 是否派發滾動到底部的事件，用於上拉載入
*/
pullup: {
       type: Boolean,
default: false
},
/**
      * 是否派發頂部下拉的事件，用於下拉重新整理
*/
pulldown: {
       type: Boolean,
default: false
},
/**
      * 是否派發列表滾動開始的事件
*/
beforeScroll: {
       type: Boolean,
default: false
},
/**
      * 當資料更新後，重新整理scroll的延時。
*/
refreshDelay: {
       type: Number,
default: 20
}
   },
data() {
     return {
       IsRefresh: false,
IsLoading: false
};
   },
mounted() {
     // 保證在DOM渲染完畢後初始化better-scroll

相關推薦

使用better-scroll配合vue實現上拉載入下拉重新整理元件

前提背景:大前端的時代造就了前端的業務邏輯越來越重，原有的MVP設計開發模式(jquery時代)造成了前端介面和資料操作都集中在MVP模式中的P層架構即控制器上，P層承擔了大量的邏輯程式碼和操作檢視DOM程式碼，兩者互動在一起耦合性很強並且很重，而V(檢視層)、M(資料層)的

基於better-scroll封裝一個上拉載入下拉重新整理元件

<template> <div class="scroll" ref="wrapper"> <!-- 資料列表 --> <div class="list-wrapper"> <slot name="content"&g

使用vue-scroller實現上拉載入下拉重新整理

列表+優化+上拉載入下拉重新整理 因為剛進頁面就會下拉載入,所以我在created裡面就沒有加上http請求 template: <scroller class="page-loadmore-list" :on-infinite="infinite" :on-

banner實現無限輪播+下拉重新整理上拉載入+ 下拉時 listview 和輪播圖一起重新整理

//首先把所需要的依賴包匯入  gson jar包、imageLoader jar包、banner1.4.9jar包、design jar包，，，然後匯入library，新建專案，把library匯入專案中 //新增許可權 <uses-permiss

ListView實現上拉載入&下拉重新整理

上拉載入&下拉重新整理 思路詳解： 自定義的帶有下拉重新整理和上拉載入的ListView開始時，跟系統的ListView一樣。不過多了個header和footer只不過這兩個佈局以不同的方式隱藏起來了而已。（header是在手機螢幕外的上面，footer是直接隱藏

通過SwipeRefreshLayout實現ListView的上拉載入下拉重新整理

上拉重新整理下拉載入相信是在日常的開發中使用的最頻繁的一個元件了，大量資料的展示一定會使用到分頁的功能以提升使用者體驗，目前可以看到的市面上的應用的下拉重新整理也都是配合的SwipeRefreshLayout來實現的，看起來比較美觀，相比自定義的下拉重新整理的動

mui的上拉載入下拉重新整理的實現

效果圖 ---- 用的是mui框架。（我自己不會，朋友教我的。這篇可能不是很好，希望能對你有所幫助。） <!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" co

Android上拉載入下拉重新整理（使用第三方類庫實現的）

package com.example.android_pullxml; import java.util.ArrayList; import java.util.List; import org.json.JSONArray; import org.json.JSONEx

react-native-pull實現上拉載入下拉重新整理

前言 我們在做原生app開發的時候，很多場景都會用到下拉重新整理、上拉載入的操作，Android中如PullToRefreshListView，iOS中如MJRefresh等都是比較好用，且實現上比較簡單的第三方庫。他們的實現原理大體相同，都是在列表的基礎上新增頭部和尾

簡單實現標題欄懸浮狀態，使用PullToRefreshListView上拉載入下拉重新整理

title_xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     a

自定義SwipeRefreshLayout實現上拉載入,下拉重新整理

原來的Android SDK中並沒有下拉重新整理元件，但是這個元件確實絕大多數APP必備的一個部件。好在google在v4包中出了一個SwipeRefreshLayout，但是這個元件只支援下拉重新整理，不支援上拉載入更多的操作。因此，我們就來簡單的擴充套件一下這個元件以實現上拉下載的目的。 基本原理 上

vue和mui結合使用的那些坑和vue-scroller上拉載入下拉重新整理使用

mui怎麼匯入 在main.js裡匯入js檔案 css直接在main.js裡使用impor匯入即可 測試使用在頁面使用mui，恩，完美，我以為這是一個美好的開端，但是，坑有好多啊（mui初始化，我一般放在mounted函式裡） 1. 使用mui頁面

WebApp-mui列表頁上拉載入下拉重新整理 跳轉詳情頁

列表頁 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=de

XrecyclerView上拉載入下拉重新整理+RXjava+retrofit+fresco+MVP

依賴： //XrecyclerView：          compile 'com.jcodecraeer:xrecyclerview:1.5.9' //RXjava依賴：     implement

小程式上拉載入下拉重新整理

小程式上拉載入下拉重新整理 在小程式api裡設定 onPullDownRefresh 下拉重新整理 onReachBottom 上拉觸低 想要使用這兩個方法還要在json檔案裡配置 “onReachBottomDistance”:true, 開啟上拉 “enablePullDownR

側滑+多條目+上拉載入+下拉重新整理+無線輪播

APP package com.example.week_02_02; import android.app.Application; import com.nostra13.universalimageloader.core.DisplayImageOptions; import

XListView上拉載入下拉重新整理，第一個條目展示Banner輪播圖

佈局開始 此處只有xlistview的佈局 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://sch

側拉+TabLayout切換fragment+Viewpager輪播圖小圓點和圖片上顯示標題+多條目+上拉載入+下拉重新整理

1.MainActivity主頁面 package com.example.zonghelianxi01; import android.annotation.SuppressLint; import android.support.annotation.Nullable; impor

側滑+多條目+上拉載入+下拉重新整理+無限輪播+網路判斷

1.MainActivity頁面 package com.example.week2_02; import android.content.DialogInterface; import android.content.Intent; import android.support.v4

基類抽取http服務(網路判斷)資料庫多條目載入上拉載入下拉重新整理

//BaseActivity public abstract class BaseActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) {