## LoadMore 加載更多
[TOC]
用于列表中,做滾動加載使用,展示 loading 的各種狀態,組件名:`ts-load-more`
**使用方式:**
在`script`中引用組件
~~~
import tsLoadMore from "./components/teaset/components/ts-load-more.vue";
export default {
components: {tsLoadMore}
}
~~~
在`template`中使用組件
~~~
<ts-load-more :loadingType="loadingType" @tap="loadMoreSearchResult"></ts-load-more>
~~~
**屬性說明:**
| 屬性名 | 類型 | 默認值 | 說明 |
| --- | --- | --- | --- |
| loadingType| String | 0| 上拉的狀態:0-loading前;1-loading中;2-沒有更多了 |
| show-image | Boolean | true | 是否顯示 loading 圖標 |
| color | String | #777777 | 圖標和文字顏色 |
| content-text | Object | `{contentdown: "上拉顯示更多",contentrefresh: "正在加載...",contentnomore: "沒有更多數據了"}` | 各狀態文字說明 |
| tap| 點擊 ts-load-more 觸發事件 | \- |
## 一個綜合的例子
# 安裝
~~~shell
# 安裝
npm install mockjs
~~~
```
<template>
<view class="ts-column">
<ts-banner image="http://via.placeholder.com/750x375"></ts-banner>
<view v-for="(item,index) in list" :key="item.id">
<ts-list>
<ts-list-item :title="item.title" :note="item.company_address" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png"></ts-list-item>
</ts-list>
</view>
<ts-load-more :loadingType="loadingType" @tap="loadMoreSearchResult"></ts-load-more>
</view>
</template>
<script>
// import api from '@/common/api/index.js' //導出整個模塊
// 或者使用以下語法單獨導出子模塊
import {
company
} from '@/common/api/index.js'
export default {
data() {
return {
loadingType: 0, //上拉的狀態:0-loading前;1-loading中;2-沒有更多了
page: 0,
list: [],
}
},
async onPullDownRefresh() {
this.list = []; //清除已經加載的數據
this.loadingType = 0; //恢復默認的狀態
await this.loadMoreSearchResult() //模擬加載一次數據
setTimeout(() => {
uni.stopPullDownRefresh()
}, 1000)
},
async onLoad() {
await this.loadMoreSearchResult()
},
async onReachBottom() {
await this.loadMoreSearchResult();
},
methods: {
async loadMoreSearchResult() {
//上拉的狀態:0-loading前;1-loading中;2-沒有更多了
if (this.loadingType !== 0) {
return;
}
this.loadingType = 1;
this.page = this.page + 1;
//使用Es2017語法
let response = await company.getList({
page: this.page
});
if (response.errno === 0) {
this.list = this.list.concat(response.data.data);
if (response.data.totalPages == response.data.currentPage) {
this.loadingType = 2; //2-沒有更多了
} else {
this.loadingType = 0; //開啟新一輪加載
}
} else {
this.loadingType = 0; //開啟新一輪加載
}
}
}
}
</script>
<style>
</style>
```
## common/api/company.js
```
const Mock = require('mockjs')
export default {
getList(map = {}) {
return new Promise((resolve, reject) => {
let mockOption = {
errno: 0,
errmsg: '獲取信息成功',
data: {
count: 55,
totalPages: 5,
pageSize: () => {
return parseInt(map.pageSize || 10);
},
currentPage: () => {
return parseInt(map.page || 1);
},
'data|10': [{
'id': '@increment()',
"title|1": ['深圳市云創得力數據有限公司', '騰訊', '阿里', '百度', '小米科技'], //招聘崗位名稱
"company_scale|1": ["10人以下", "10人以上", '50人以上', '100人以上', '500人以上'], //公司規模
"city": "@city()",
"company_address": "@county()", //公司地址
"cover_image": "http://via.placeholder.com/200x150", //公司LOGO
"tags": ['認證企業', 'IT企業'],
"type|1": ['網絡游戲', "電子商務", "家政服務", "IT服務", "金融服務", "文體娛樂", "咨詢服務", "教育培訓"],
}]
}
}
resolve(Mock.mock(mockOption))
})
},
getInfo(id, map = {}) {
return new Promise((resolve, reject) => {
let mockOption = {
errno: 0,
errmsg: '獲取信息成功',
'data': {
'id': '@increment()',
"title": "深圳市云創得力數據有限公司", //公司名稱
"company_abbreviate": "得力數據", //公司名稱縮寫
"city": "深圳市 南山區",
"cover_image": "http://via.placeholder.com/750x375", //公司LOGO
"type|1": ['網絡游戲', "電子商務", "家政服務", "IT服務", "金融服務", "文體娛樂", "咨詢服務", "教育培訓"],
"tags": ['認證企業', 'IT企業'],
"company_scale|1": ["10人以下", "10人以上", '50人以上', '100人以上', '500人以上'], //公司規模
"description": "@cparagraph(10,20)", //公司介紹
"address": "@county(true)", //工作地點
"welfare": () => {
//隨機選擇3個標簽
let array = ["季度獎", "年度體檢", "年終雙薪", "五險一金", "生日慰問金"];
array.sort(function(a, b) {
return Math.random() > 0.5 ? 1 : 0
}); //簡單打亂方法
let [a, b, c, ...rest] = array;
return [a, b, c];
},
}
}
resolve(Mock.mock(mockOption))
})
},
}
```
- 內容介紹
- EcmaScript基礎
- 快速入門
- 常量與變量
- 字符串
- 函數的基本概念
- 條件判斷
- 數組
- 循環
- while循環
- for循環
- 函數基礎
- 對象
- 對象的方法
- 函數
- 變量作用域
- 箭頭函數
- 閉包
- 高階函數
- map/reduce
- filter
- sort
- Promise
- 基本對象
- Arguments 對象
- 剩余參數
- Map和Set
- Json基礎
- RegExp
- Date
- async
- callback
- promise基礎
- promise-api
- promise鏈
- async-await
- 項目實踐
- 標簽系統
- 遠程API請求
- 面向對象編程
- 創建對象
- 原型繼承
- 項目實踐
- Classes
- 構造函數
- extends
- static
- 項目實踐
- 模塊
- import
- export
- 項目實踐
- 第三方擴展庫
- immutable
- Vue快速入門
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入門
- 模板語法
- 計算屬性和偵聽器
- Class 與 Style 綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 組件注冊
- Prop
- 自定義事件
- 插槽
- 混入
- 過濾器
- 項目實踐
- 標簽編輯
- 移動客戶端開發
- uni-app基礎
- 快速入門程序
- 單頁程序
- 底部Tab導航
- Vue語法基礎
- 模版語法
- 計算屬性與偵聽器
- Class與Style綁定
- 樣式與布局
- Box模型
- Flex布局
- 內置指令
- 基本指令
- v-model與表單
- 條件渲染指令
- 列表渲染指令v-for
- 事件與自定義屬性
- 生命周期
- 項目實踐
- 學生實驗
- 貝店商品列表
- 加載更多數據
- 詳情頁面
- 自定義組件
- 內置組件
- 表單組件
- 技術專題
- 狀態管理vuex
- Flyio
- Mockjs
- SCSS
- 條件編譯
- 常用功能實現
- 上拉加載更多數據
- 數據加載綜合案例
- Teaset UI組件庫
- Teaset設計
- Teaset使用基礎
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代碼模版
- 項目實踐
- 標簽組件
- 失物招領客戶端原型
- 發布頁面
- 檢索頁面
- 詳情頁面
- 服務端開發技術
- 服務端開發環境配置
- Koajs快速入門
- 快速入門
- 常用Koa中間件介紹
- 文件上傳
- RestfulApi
- 一個復雜的RESTful例子
- 使用Mockjs生成模擬數據
- Thinkjs快速入門
- MVC模式
- Thinkjs介紹
- 快速入門
- RESTful服務
- RBAC案例
- 關聯模型
- 應用開發框架
- 服務端開發
- PC端管理界面開發
- 移動端開發
- 項目實踐
- 失物招領項目
- 移動客戶端UI設計
- 服務端設計
- 數據庫設計
- Event(事件)
- 客戶端設計
- 事件列表頁面
- 發布頁面
- 事件詳情頁面
- API設計
- image
- event
- 微信公眾號開發
- ui設計規范