1. 程式人生 > >vue 上拉載入更多

vue 上拉載入更多

var _this=this;
var goods_id = _this.$route.query.id;
var isscroll = true;
_this.$nextTick(() => {
var el = document.querySelector(".rating_cnt_scroll");
var offsetHeight = el.offsetHeight;
el.onscroll = () => {
var scrollTop = el.scrollTop;
var scrollHeight = el.scrollHeight;
if (offsetHeight + scrollTop - scrollHeight >= -1) {
if(isscroll==true){
isscroll = false;
var requestData = [];
_this.mountedPage++;
console.log(_this.mountedPage);
isscroll = false;
var data = {
goods_id: goods_id,
page: _this.mountedPage,
checkData: _this.$md5("caiegouinterface")
};
_this.$http.post(baseUrl + "/api/Goods/getEvaluate", data, {emulateJSON: true})
.then(res => {
if(res.body.code==200){
requestData = res.body.data.evaluate;
if (res.body.data.length == 0) {
//_this.page=1;
isscroll = true;
return false;
}
}
});
}
setTimeout(() => {
_this.evaluate = _this.evaluate.concat(requestData);
isscroll = true;
}, 100);
}

}
})

相關推薦

vue 載入

var _this=this; var goods_id = _this.$route.query.id; var isscroll = true; _this.$nextTick(() => { var el = document.querySelector

vue基於mint-ui元件loadmore實現載入,下重新整理功能

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

apicloud js獲取資料列表 載入 標準頁 (非vue版 )

<!DOCTYPE html>  <html>  <head>      <meta charset="utf-8">      <meta name="viewport" content="maximum-scale=1

vue+better-scroll實現tab選項卡載入的實踐例子

 閒話少說,先上效果 專案中會經常遇到類似這樣的多tab切換的需求,tab可以點選,可以滑動。每個tab的內容還需要上拉載入重新整理。 沒有辦法,好好研究一下,做個記錄。以防來日不時之需。 專案中上拉載入用到了很好用的工具better-scroll,各位可能都知

vue實現網路圖片瀑布流 + 下重新整理 + 載入

一、思路分析和效果圖   用vue來實現一個瀑布流效果,載入網路圖片,同時有下拉重新整理和上拉載入更多功能效果。然後針對這幾個效果的實現,捋下思路: 根據載入資料的順序,依次追加標籤展示效果; 選擇哪種方式實現瀑布流,這裡選擇絕對定位方式; 關鍵問題:由於每張圖片的寬高不一樣,而瀑布流中要求所有圖

微信小程式載入

一、程式碼環境         一開始用的是scroll-view元件,但是真機運用的時候發現上拉載入更多的時候,資料有跳動,對使用者互動及其不友好,所以決定修改上拉載入更多的效果         我用的是wep

小程式載入,onReachBottom

onReachBottom: function () { console.log(1) var that = this; var path = '/listsearch/'; var datalist=null; var url = app.globalData.http_base_url + path;

js_原生js實現載入的功能。

    1 //--------------上拉載入更多--------------- 2 //獲取滾動條當前的位置 3 function ge

android下重新整理,載入

public class MainActivity extends AppCompatActivity { private RecyclerView mRecyclerview; private ArrayList<Integer> mList = new ArrayL

讓Android Support V4中的SwipeRefreshLayout支援載入

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

小程式載入, 下重新整理

直接使用小城程式自帶方法onReachBottom 、 onPullDownRefresh 如果使用scroll-view元件還可以監聽 bindscrolltoupper 、 bindscrolltolower // 上拉載入更多

Refresh+LoadMore下重新整理 載入

匯入有關的library庫 XListViewFlush import android.os.Bundle; import android.os.Handler; import android.support.v7.app.AppCompatActivity; import

Android中ListView下重新整理載入效果實現

  在Android開發中,下拉重新整理和上拉載入更多在很多app中都會有用到,下面就是具體的實現的方法。 首先,我們自定義一個RefreshListView來繼承與ListView,下面是程式碼: package com.example.downrefresh; import

裝飾模式應用 為RecyclerView.Adapter新增載入

這個包裝類主要有兩個關鍵點: 第一個是列表尾部新增一個條目,用於顯示各種載入的狀態,就是添加了一個特殊型別的holder。 第二個是監控列表滾動,滾動到我們新增的那個holder的時候,觸發我們需要的操作,比如修改holder裡的狀態文字等。 注意問題: 以前做過兩一個實

Android 列表下重新整理載入分頁功能

手機app 列表頁很常用,當資料特別多的時候,為了更好地使用者體驗,需要進行分頁處理。那麼分頁功能怎麼做呢? 看如下核心程式碼 if (mPage == 1 && mList != null) { mList.clear();

vue - 下載入

上拉重新整理下拉載入更多 vue好多外掛可以使用,完成該功能,但是我使用過幾個外掛之後,不知道是不是自己沒有找對方法,都沒有解決我得問題 我出現得情況是,下拉時請求下一頁得資料,但是如果資料條數過多,比如一頁請求10條資料,螢幕太短只能顯示5條資料,那麼再次下拉就不是請求資料,而是想看下面內

最全的使用RecyclerView實現下重新整理和載入

前言:            縱觀多數App,下拉重新整理和上拉載入更多是很常見的功能,但是谷歌官方只有一個SwipeRefreshLayout用來下拉重新整理,上拉載入更多還要自己做。      本篇文章基於RecyclerView簡單封裝了這兩個操作,下拉重

react移動端載入元件

在開發移動端react專案中,遇到了上拉載入更多資料的分頁功能,自己封裝了一個元件,供大家參考,寫的不好還請多多指教!   import React, {Component} from 'react'; import cssModuleHandler from "../../../utils/cssM

TP5+小程式下重新整理載入

網上看了好多,我也參考了好多,不過總結了大家的經驗還是做出來了,前提是你有了小程式的基礎,廢話不多說。我這裡是tp5+小程式的,先上預覽圖,因為是PC端測試,拍不成高清圖,講究看一下: 上拉載入更多下拉重新整理前端wxml程式碼: <view class="page

Banner+自定義View+SmartRefreshLayout下重新整理載入

仿美團開源專案整體架構和首頁其實早就完成了,前段時間家裡各種事情搞得心力交瘁,停更了一段時間。甚至一度動搖繼續這個專案的決心,因為最近在學前端,在技術的深度和廣度之間一直糾結搖擺不定。一個聲音是繼續完成這個專案,把安卓玩的更深入一些;另一個聲音是趕緊學前端吧