2. 程式人生 > >mui上拉載入外掛+Vue

mui上拉載入外掛+Vue

阿新 • • 發佈：2019-01-11
var mainScope = new Vue({ el: '#atApp', data : { clinicList:{data:[],pageNo:1,unreads:0}, doctorList:{data:[],pageNo:1,unreads:0}, beginDate: '2017/07/01', endDate : '2017/07/01' }, methods:{ /** * 初始化Vue page */
initVuePage:function(){ //繫結上拉載入 $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) { mui(pullRefreshEl).pullToRefresh({ up: { callback: function
() { var self = this; mainScope.loadMore({'self':self}); }, offset: 20, contentinit: '<p style="text-align: center;">上拉顯示更多</p>'
, contentdown: '<p style="text-align: center;">上拉顯示更多</p>', contentrefresh: '<p style="text-align: center;">正在載入...</p>', contentnomore:'<p style="text-align: center;">沒有更多資料了</p>', auto:true//第一次載入自動上拉一次 } }); }); }, loadMore:function(data){ if($(data.self.element).attr('lable')){ mainScope.queryClinics(data); }else{ mainScope.queryDoctors(data); } }, queryDoctors:function(data){ var records = 5; //引數校驗 Vue.http({ url:"data.txt", method:'GET', params:{ userID:85547640210818, queryType:"1", clinicID:50003, 'pageNO': mainScope.doctorList.pageNo, 'records': records } }).then(function(msg){ if(msg.body.code == '000000'){ mainScope.doctorList.data = mainScope.doctorList.data.concat(msg.body.data.queryList.data); //mainScope.doctorList.unreads = msg.body.data.doctorNew; mainScope.doctorList.pageNo++; if(msg.body.data.queryList.recordsTotal <= mainScope.doctorList.pageNo * records){ data.self.endPullUpToRefresh(true); }else{ data.self.endPullUpToRefresh(); } }else { console.log(msg.body.codeDesc) } }); }, queryClinics:function(data){ var records = 5; //引數校驗 Vue.http({ url:"data.txt", method:'GET', params:{ userID:85547640210818, queryType:"1", clinicID:50003, 'pageNO': mainScope.clinicList.pageNo, 'records' :records } }).then(function(msg){ if(msg.body.code == '000000'){ mainScope.clinicList.data = mainScope.clinicList.data.concat(msg.body.data.queryList.data); mainScope.clinicList.unreads = msg.body.data.clinicNew; mainScope.clinicList.pageNo++; if(msg.body.data.queryList.recordsTotal <= mainScope.clinicList.pageNo * records){ data.self.endPullUpToRefresh(true); }else{ data.self.endPullUpToRefresh(); } }else { console.log(msg.body.codeDesc) } }); } } }); mainScope.initVuePage();

相關推薦

mui上拉載入外掛+Vue

var mainScope = new Vue({ el: '#atApp', data : { clinicList:{data:[],pageNo:1,unreads:0},

mui上拉載入通過ajax獲取資料，實現分頁

上拉重新整理程式碼 $(document).ready(function(){ //上拉載入下拉重新整理 mui.init({ pullRefresh: {

mui上拉載入下拉重新整理問題

mui是h5十大框架之一。很好用，但是針對不同的場景，文件的描述不夠我們理解。 場景：通過mui的上拉載入更多資料，下拉重新整理回剛剛進入當前頁面的狀態。筆者設定每次上拉就清空舊頁面的內容，把新載入的10條資料渲染到頁面上，當下拉時候，恢復到第一次載入的狀態。 問題：當上

mui上拉載入會影響頁面中的某些點選事件

專案是vue寫的（移動端） <div class="mui-scroll"> 　　<a :href="bannerinfo.activity_url" class="icon play"> 　　　　連結點選沒反應（點元素的最左邊才會跳轉） 　　</a> 　　<

MUI上拉載入，下拉重新整理

前言：這是最近專案中的一個新聞列表 1.DOM容器 這裡只貼主要的程式碼 <div id="refreshId" class="mui-content mui-scroll-wrapper" style="background-col

dropload.js（上拉載入外掛使用過程中遇到的坑）

之前因為專案需要一個上拉載入的效果，然後無意中看到了此外掛，用了之後感覺挺好用的，就是坑太多，下面列出一些我在實際使用中遇到的問題。 　　注：如果在使用該外掛的時候遇到問題，確實無法解決，也沒有人能幫你解決，建議換外掛或者加群，群號也在上面的連結裡面。 　　問

實現移動端上拉載入和下拉重新整理的vue外掛(mescroll.js)

做一個簡單的移動端展示專案，後臺分頁後前端載入，實現上拉載入下一頁，找了下，還是用這個mescroll.js外掛好一點 1.npm安裝 npm install --save mescroll.js //不要使用cnpm安裝 匯入(在哪個頁面使用,則在哪個頁面匯入

移動端上拉載入和下拉重新整理的vue外掛

做一個簡單的移動端展示專案，後臺分頁後前端載入，實現上拉載入下一頁，找了下，還是用這個mescroll.js外掛好一點 1.npm安裝 npm install --save mescroll.js //不要使用cnpm安裝 匯入(在哪個頁面使用,則在哪個頁面

mui+vue上拉載入

程式碼展示 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" conten

mui下拉載入、上拉重新整理(包括分頁，vue.js)

一、資料參考 二、實現步驟 1.HTML內容 （最好按照這個結構來佈置，當然 id的位置可以稍微根據實際需要來調整） <!--下拉重新整理容器--> <div id="pullrefresh" class="m

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

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

[log] vue使用Mint元件實現下拉重新整理、上拉載入

https://mint-ui.github.io/docs/#/zh-cn2/loadmore 使用的vue <mt-loadmore :top-method="loadTop" :bottom

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

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

mui 下拉重新整理 上拉載入

轉自http://ask.dcloud.net.cn/question/1247 動態禁止和恢復上下拉重新整理 留著做個demo 需要暫時禁止和恢復上下拉重新整理，我的初始化程式碼如下： mui.init({ styles: { top: ‘42px’, //子頁面頂部位置

vue 上拉載入自定義元件，超好用哦

1.建立元件components > zj-roll > index.vue <template> <div> <slot></slot> <div class='bottom' v-if='(!lastP

vue-scroller的使用 實現下拉重新整理 上拉載入初始效果

安裝vue-scroller npm i vue-scroller -D 在main.js中： import VueScroller from 'vue-scroller' Vue.use(VueScroller) &nbs

MUI下拉重新整理上拉載入實現

DOM結構 <div id="refreshContainer" class="mui-content mui-scroll-wrapper"> <div class="hui-media-list mui-scroll"> <u

MUI上拉重新整理下拉載入

使用之前引入檔案 <link rel="stylesheet" href="../lib/mui/css/mui.css"> <script src="../lib/mui/js/mui.js"></script>   HTML //

vue基於mint-ui元件loadmore實現上拉載入更多，下拉重新整理功能

這個是模擬手機寫的簡單樣式，不要在意這些細節，為了撐滿容器每次載入十二   那就開始程式碼了  ==》 先安裝 mint-ui 在main.js中引入mint-ui的css樣式：  import 'mint-ui/lib/style.css' 在

用vue-pull-to完成手機端的上拉載入

安裝vue-pull-to npm install vue-pull-to --save 在需要的元件中引用並註冊 import PullTo from 'vue-pull-to' ... components: {PullTo}, 使用元件 <pull-to