uinapp下拉刷新,更新列表数据
生活随笔
收集整理的這篇文章主要介紹了
uinapp下拉刷新,更新列表数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<template><view class="index_container"><view class="index_search_con"><uni-search-bar v-model="condition" :radius="100" placeholder="車牌號/車輛VIN" cancelButton="none"@input="input"></uni-search-bar></view><view class="index_list_con"><uni-list-item v-for="(item,i) in gpsCarList" :key="i" @click="goDetails(item)"><view slot="body" class="slot-box slot-text" @tap="goDetails(item)"><view class="index_list_header"><view class="index_list_header_l">{{item.brand != '' ? item.brand : '未知'}}</view><view class="index_list_header_r">{{item.presentPlateNo != '' ? item.presentPlateNo : '暫無車牌'}}</view></view><view class="index_list_body"><view class="index_list_body_l">車輛VIN:</view><view class="index_list_body_r">{{item.vin != '' ? item.vin : '暫無車輛VIN'}}</view></view><view class="index_list_footer"><view class="index_list_footer_l">創建時間:</view><view class="index_list_footer_r">{{item.createDate != '' ? item.createDate : '暫無創建時間'}}</view></view></view></uni-list-item><uni-load-more :status="loadStatus" :contentText="contentText"></uni-load-more></view></view>
</template><script>import wxLoginVue from '../../components/wxLogin/wxLogin.vue';export default {data() {return {page: 1,limit: 10,gpsCarList: [], //GPS綁定數據列表loadStatus: 'more',contentText: {contentdown: '上拉顯示更多',contentrefresh: '正在加載...',contentnomore: '沒有更多數據了'},userInfo:{},};},onLoad() {this.userInfo = uni.getStorageSync("users");this.getGpsJobList();},/*** 下拉刷新*/onPullDownRefresh() {this.page = 1;this.loadStatus = 'loading';// this.gpsCarList = [];this.getGpsJobList();},onReachBottom() {this.loadStatus = 'loading';this.getGpsJobList();},methods: {goDetails(item) {let _this = this;uni.navigateTo({url: '/pages/my/gpsBindJobDetails?checkSupplierClerkId='+ _this.userInfo.id + '&id=' + item.id});},//獲取小程序GPS任務列表getGpsJobList() {let _this = this;let params = {limit: _this.limit,page: _this.page,};_this.$http({url: `/check/api/gps/getGpsTaskPage`,method: 'GET'}, params).then((res) => {if (res.data.code !== 0) {return uni.showToast({title: res.data.msg,icon: 'none',duration: 3000})}// console.log(res);if (res.data.data.list.length !== 0) {let gpsCarList = res.data.data.list;let gpsCarList2 = _this.gpsCarList.concat(gpsCarList);_this.gpsCarList = _this.deWeightThree(gpsCarList2);_this.page++;_this.loadStatus = 'more';} else {_this.loadStatus = 'noMore';}},error => {console.log('網絡請求錯誤,請稍后重試!');return;});},//這一步就是往原數組加數據deWeightThree(gpsCarList2) {let map = new Map();for (let item of gpsCarList2) {if (!map.has(item.id)) {map.set(item.id, item);}}return [...map.values()];},}}
</script>
總結
以上是生活随笔為你收集整理的uinapp下拉刷新,更新列表数据的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 输入法自定义短语笔记/md常用配置/搜狗
- 下一篇: Matlab中的图怎样插入Word效果最