
```
<template>
<view class="ts-column ts-flex-item">
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item>
<view class="swiper-item">
<ts-banner class="ts-row ts-flex-item" image="http://via.placeholder.com/750x375" :height="350"></ts-banner>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<ts-banner class="ts-row ts-flex-item" image="http://via.placeholder.com/750x375" :height="350"></ts-banner>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<ts-banner class="ts-row ts-flex-item" image="http://via.placeholder.com/750x375" :height="350"></ts-banner>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<ts-banner class="ts-row ts-flex-item" image="http://via.placeholder.com/750x375" :height="350"></ts-banner>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<ts-banner class="ts-row ts-flex-item" image="http://via.placeholder.com/750x375" :height="350"></ts-banner>
</view>
</swiper-item>
</swiper>
<ts-search-bar :keywords="keywords" @search="onSearch"></ts-search-bar>
<view class="ts-row ts-flex-item">
<ts-segmented-control class="ts-row ts-flex-item" :values="tabs" styleType="text" @clickItem="onClickItem"></ts-segmented-control>
</view>
<view class="ts-column" v-for="(item ,index) in searchResult" :key="index">
<navigator :url="'/pages/tabbar/lost/detail?id='+item.id">
<view class="ts-section">
<view class="ts-section-title">
<view class="ts-row">
<view class="ts-flex-item" style="align-items: flex-end;">
<text class="ts-h2 ts-text-bold">{{item.linkman}}</text>
<text class="ts-h6 ts-padding-left">{{item.mobile}}</text>
</view>
<view style="justify-content: center; align-items: center;">
<ts-badge :text="item.type" type="error"></ts-badge>
</view>
</view>
</view>
<view class="ts-section-body">
<view class="ts-row ts-h2 ts-text-bold ts-ellipsis">
{{item.title}}
</view>
<view class="ts-row ts-padding-top" style="flex-wrap: wrap;">
<view class="ts-row ts-padding-right ts-padding-bottom" v-for="(img,idx) in item.images" :key="idx" style="width: 150upx; height: 150upx;">
<image :src="img" style="width: 100%; height: 100%;"></image>
</view>
</view>
<view class="ts-row ts-ellipsis-3" style="flex-wrap: wrap;">
{{item.description}}
</view>
<ts-line></ts-line>
<view class="ts-row">
<view>地址:</view>
<view>{{item.address}}</view>
</view>
<view class="ts-row">
<view>時間:</view>
<view>{{item.create_time}}</view>
</view>
</view>
</view>
</navigator>
<ts-gap></ts-gap>
</view>
<ts-load-more :loadingType="loadingType"></ts-load-more>
<ts-gap></ts-gap>
</view>
</template>
<script>
import * as api from '@/common/api';
export default {
data() {
return {
currentTab: 0,
tabs: ['全部', '丟失', '撿到'],
searchResult: [],
type: '全部',
keywords: '',
page: 0,
loadingType: 0,
}
},
async onReachBottom() {
await this.loadMoreSearcheResult();
},
async onLoad() {
await this.loadMoreSearcheResult();
},
methods: {
async onSearch(keywords) {
this.keywords = keywords;
await this.doSearch();
},
async doSearch() {
this.page = 0;
this.loadingType = 0;
this.searchResult = [];
let types = ['', '丟失', '撿到'];
this.type = types[this.currentTab];
await this.loadMoreSearcheResult();
},
async loadMoreSearcheResult() {
//上拉的狀態:0-loading前;1-loading中;2-沒有更多了
if (this.loadingType !== 0) {
return;
}
this.loadingType = 1;
this.page = this.page + 1;
let res = await api.event.getList({
page: this.page,
key: this.keywords,
type: this.type === "全部" ? '' : this.type,
pageSize: 10,
});
if (res.errno === 0) {
const data = res.data;
if (data && data.data) {
// console.log(data);
this.searchResult = this.searchResult.concat(data.data);
}
if (data.totalPages === data.currentPage) {
this.loadingType = 2; //2-沒有更多了
} else {
this.loadingType = 0; //開啟新一輪加載
}
} else {
console.log(res.errmsg);
}
},
async onClickItem(index) {
if (this.currentTab !== index) {
this.currentTab = index;
await this.doSearch();
}
}
}
}
</script>
<style>
</style>
```
- 內容介紹
- 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設計規范