2. 程式人生 > >vue從入門到放棄--- 滾動載入

vue從入門到放棄--- 滾動載入

阿新 • • 發佈：2019-02-02
import {liveCareer}from '@/api'; export default { data() { return { careers:[], search: this.search, jobloading: false, //無限滾動被禁用 page: 2, //傳遞頁數 totrue: false, //控制停止滾動
noJob: false, //沒有資料 showLoading: true, //是否顯示載入中 allLoaded: false, //載入完畢 loadGif: false //loading圖顯示隱藏 }; }, methods: { /* 關鍵字搜尋職位 */ clearJob() { this
.careers = []; this.page = 1; this.totrue = true; this.jobloading = false; this.loadMore(); }, /* 載入第一頁 */ async liveCareer() { this.careers = []; let params = { szid: this
.$route.query.SzId == "null" ? "": this.$route.query.SzId, xzid: this.$route.query.XzId == "null" ? "": this.$route.query.XzId, pageNum: 1, kw: this.search ? this.search: "", type: 2 } let res = await liveCareer(params); if (res.JobList.length > 0) { this.careers = res.JobList; if (res.TotalRowCount <= 10) { this.allLoaded = true; this.noJob = false; } if (res.PageCount > 1) { this.showLoading = true; this.loadGif = true; this.totrue = true; } } else { this.showLoading = false; this.noJob = true; } }, /* 載入職位 */ loadMore() { this.jobloading = true; let vm = this; if (this.totrue) { let params = { szid: this.$route.query.SzId == "null" ? "": this.$route.query.SzId, xzid: this.$route.query.XzId == "null" ? "": this.$route.query.XzId, pageNum: this.page, kw: this.search ? this.search: "", type: 2 } liveCareer(params).then(res =>{ var list1 = res.JobList; var count = res.PageCount; if (vm.careers.length == 0) { vm.careers = list1; } else { if (this.page<= parseInt(count)){ var list2 = vm.careers; vm.careers = list2.concat(list1); } else { this.totrue = false; this.loadGif = false; this.allLoaded = true; } } this.page++; setTimeout(() => { vm.jobloading = false; }, 1000); }); } else { this.jobloading = false; } } }, created() { this.liveCareer(); } }

相關推薦

vue從入門到放棄--- 滾動載入

import {liveCareer}from '@/api'; export default { data() { return { careers:[], search: this.

vue從入門到放棄---axios 和 rap模擬資料

axios //main.js import axios from 'axios' Vue.prototype.$axios = axios; //a.vue created() { this.$axios.get(`http://rapapi.or

vue從入門到女裝？？：從零開始搭建後臺管理系統（一）安裝框架

安裝及執行都是基於node的，不會node的可以自行百度，網上教程很多，也不難 專案效果預覽： demo1 demo2 原始碼下載 開始安裝框架： vue element-ui   注意如果報錯安裝失敗就重新安裝，不然雖然本地有element的依賴包但是可能會出一些奇怪的錯誤 另外element-ui

VUE從入門到精通

1概念（Node.js,NPM,VUE）：         Node.js:伺服器端的JavaScript直譯器         NPM：Node Package Manager,node的包管理器，對node的包的安裝，解除安裝，更新，檢視等         vue:構建使

Vue從入門到精通（5）--第四階段（上）：Vue入門及Vue-cli上手教程

第四階段 vue2.0語法 vue2.0+webpack搭建開發環境 官方腳手架vue-cli     Vue的作者尤雨溪大神寫了一篇《新手向：Vue 2.0 的建議學習順序》來介紹Vue及相關知識點的學習路線，主要列出了知識點概要，如果你覺得略

轉-Vue.js2.0從入門到放棄---入門實例（一）

命令行 今天 初始化 手動 pre ref cnpm 簡單介紹 收藏 http://blog.csdn.net/u013182762/article/details/53021374 標簽： Vue.jsVue.js 2.0Vue.js入門實例Vue.js 2.0教

webpack 配置 Vue 多頁應用 —— 從入門到放棄

webpack 配置 Vue 多頁應用 —— 從入門到放棄 一直以來，前端享有無需配置，一個瀏覽器足矣的優勢，直到一大堆構建工具的出現，其中 webpack 就是其中最複雜的一個，因此出現了一個新興職業 『webpack 配置工程師』。其實 webpack 配置本質上來說也就是程式設計，難點在於各種 loa

Vue.js2.0從入門到放棄---入門例項（三）

已經有幾周沒有更新部落格了，最近自己也在學習就沒有能及時抽身來寫部落格。 今天就來簡單說一下vue-resource，這是vue的一個與伺服器端通訊的HTTP外掛，用來從伺服器端請求資料。話不多說，直接上乾貨吧。 這裡PS一下，有人反映之前的程式碼下載下來，執行會報錯而

npm的安裝及Vue.js2.0從入門到放棄---入門例項（一）

下載地址：http://nodejs.cn/download/ https://nodejs.org/en/download/  兩者都可以安裝node.js從node.js官網下載並安裝node，安裝過程很簡單，一路“下一步”就可以了（傻瓜式安裝）。安裝完成之後，開啟命令列

python爬蟲從入門到放棄（五）之 正則的基本使用

語言 代碼例子 name 添加 iter ima 制表符 imp things 什麽是正則表達式 正則表達式是對字符串操作的一種邏輯公式，就是 事先定義好的一些特定字符、及這些特定字符的組合，組成一個“規則字符”，這個“規則字符” 來表達對字符的一種過濾邏輯。 正則並不是

python爬蟲從入門到放棄（六）之 BeautifulSoup庫的使用

src 表達 支持 正則表達 必須 這樣的 com 子節點 prettify 上一篇文章的正則，其實對很多人來說用起來是不方便的，加上需要記很多規則，所以用起來不是特別熟練，而這節我們提到的beautifulsoup就是一個非常強大的工具，爬蟲利器。 beautifulS

python爬蟲從入門到放棄（八）之 Selenium庫的使用

自動 .com 程序 png 都是 例子 等待 點擊 哪些 一、什麽是Selenium selenium 是一套完整的web應用程序測試系統，包含了測試的錄制（selenium IDE）,編寫及運行（Selenium Remote Control）和測試的並行處理（Sele

翻身的廢魚——論PHP從入門到放棄需要多久？3

php今日課程：PHP 3天基礎鞏固視頻教程【燕十八】變量類型：字符串、整數、浮點數、資源、數組、對象、NULL、數組null類型//沒有值也沒有類型<?php$a = null; ?>檢測變量是否存在//isset檢測變量，對null類型返回falseif(isset($b)){

翻身的廢魚——論PHP從入門到放棄需要多久？4

php今日課程：PHP 3天基礎鞏固視頻教程【燕十八】1、算術運算符/加減乘除等，除數不能為02比較運算符$a = 5;$b = 3;$c = ($a > $b);var_dump($c);echo ‘<br />‘;$c = ($a == $b);var_dump($c);echo ‘&l

翻身的廢魚——論PHP從入門到放棄需要多久？6

php初學者今日課程：PHP 3天基礎鞏固視頻教程【燕十八】本文出自 “一條大大大大廢魚” 博客，謝絕轉載！翻身的廢魚——論PHP從入門到放棄需要多久？6

翻身的廢魚——論PHP從入門到放棄需要多久？7

php初學者今日課程：PHP 3天基礎鞏固視頻教程【燕十八】1、99乘法表for ($i=1; $i <= 9; $i++) { //輸出1-9 echo $i,‘<br />‘; } or ($i=1; $i <= 9; $i++) { //輸出1-9 echo $i,‘----

Python爬蟲從入門到放棄（十一）之 Scrapy框架整體的一個了解

object 定義 roc encoding eth obi pipe pos 等等 這裏是通過爬取伯樂在線的全部文章為例子，讓自己先對scrapy進行一個整理的理解 該例子中的詳細代碼會放到我的github地址：https://github.com/pythonsite/

翻身的廢魚——論PHP從入門到放棄需要多久？8

php初學者今日課程：PHP 3天基礎鞏固視頻教程【燕十八】1、動態調用函數 function addition ($a, $b){ echo ($a + $b), "\n"; } $result = "addition"; $result (3,6); echo "<br /&g

Python爬蟲從入門到放棄（十三）之 Scrapy框架的命令行詳解

directory xpath idf 成了 spider i386 名稱 4.2 不同的 這篇文章主要是對的scrapy命令行使用的一個介紹 創建爬蟲項目 scrapy startproject 項目名例子如下： localhost:spider zhaofan$ sc

翻身的廢魚——論PHP從入門到放棄需要多久？9

php初學者今日課程：PHP 3天基礎鞏固視頻教程【燕十八】1、單雙引號的區別//單雙引號的比如：轉義、變量解析、速度 $a = ‘\‘\\ \n \t \$‘;//‘和\轉義都需要加\，其他原樣輸出 echo $a; echo "<br />"; $b = " \" \\ \n \t \$";