瀏覽代碼

perf(client): 优化上拉刷新

yizhiyang 1 年之前
父節點
當前提交
3cd3eda1c7
共有 3 個文件被更改,包括 67 次插入98 次删除
  1. 35 94
      src/mixin/list.js
  2. 31 3
      src/pagesHome/homeAddress/index.vue
  3. 1 1
      src/pagesHome/popularNearby/index.vue

+ 35 - 94
src/mixin/list.js

@@ -7,9 +7,9 @@ module.exports = {
   data() {
     return {
       total: 0,
-      listData: [],
+      initList: [],
       // loadmore(加载前) loading(加载中) nomore(没有更多数据)
-      loadmoreStatus: 'loadmore',
+      loadingType: 'loadmore',
       page: {
         pageNum: 1,
         pageSize: 10,
@@ -19,21 +19,31 @@ module.exports = {
   },
   // 下拉刷新
   onPullDownRefresh() {
-    this.loadData();
+    this.page.pageNum = 1;
+    this.initList = [];
+    this.initDataList(this.queryData, true);
+
+    setTimeout(function () {
+      uni.stopPullDownRefresh();
+    }, 1000);
   },
   // 触底刷新
   onReachBottom() {
-    let { pageNum, pageSize } = this.page;
-    if (pageNum * pageSize > this.total) return;
-    this.page.pageNum++;
-    this.initDataList(this.queryData, true);
+    this.loadData();
+  },
+  mounted() {
+    this.queryData = Object.assign(
+      {},
+      { ...this.queryData },
+      {
+        paging: `${this.page.pageNum},${this.page.pageSize}`,
+      },
+    );
   },
 
   methods: {
     // 分页初始化数据isUp是否为上拉加载,默认false
-    initDataList(searchData = {}, isUp = true) {
-      this.isListLoading = true;
-
+    initDataList(searchData = {}, isUp = false) {
       uni.showLoading({
         title: '加载中',
         mask: true,
@@ -48,102 +58,33 @@ module.exports = {
         },
       );
       if (!isUp) this.page.pageNum = 1;
-
       this.listApiName({ ...this.queryData })
         .then(res => {
           if (isUp) {
-            this.listData = this.listData.concat(res.data.records);
+            this.initList = this.initList.concat(res.data.records);
           } else {
-            this.listData = res.data.records;
+            this.initList = res.data.records;
+            this.loadingType = 'no-more';
           }
           this.total = res.data.total;
-
-          if (this.listData.length < this.total) {
-            this.loadmoreStatus = 'loadmore';
-          } else {
-            this.loadmoreStatus = 'nomore';
-          }
+        })
+        .catch(err => {
+          throw err;
         })
         .finally(() => {
-          this.isListLoading = false;
-          setTimeout(() => {
-            uni.hideLoading();
-          }, 1000);
+          uni.hideLoading();
         });
     },
 
+    // 加载列表 上拉加载
     loadData() {
-      this.page.pageNum = 1;
-      this.initList = [];
-      this.initDataList(this.queryData);
-      this.loadmoreStatus = 'nomore';
-
-      setTimeout(function () {
-        uni.stopPullDownRefresh();
-      }, 2000);
+      if (this.initList.length < this.total) {
+        this.page.pageNum++;
+        this.initDataList(this.queryData, true);
+      } else {
+        this.page.pageNum = 1;
+        this.loadingType = 'no-more';
+      }
     },
   },
 };
-
-// module.exports = {
-// 	data() {
-// 		return {
-// 			pageLoading: false, // 加载页面
-// 			scrollBackTop: 0,
-// 			total: 0,
-// 			listInfo: [],
-// 			loadingType: 'more',
-// 			listApiName: '',
-// 			page: {
-// 				page: 1,
-// 				size: 10
-// 			}
-// 		}
-// 	},
-// 	// 上拉加载
-// 	onReachBottom() {
-// 		this.loadData()
-// 	},
-// 	// 返回顶部
-// 	onPageScroll(e) {
-// 		this.scrollBackTop = e.scrollTop
-// 	},
-// 	created() {},
-// 	methods: {
-// 		// 初始化数据
-// 		initDataList(apiName = 'list', isUp) {
-// 			this.listApiName = apiName
-// 			this.pageLoading = true
-// 			uni.y.showLoading()
-// 			if (!isUp) this.page.page = 1
-// 			uni.api[apiName]({
-// 				search: this.search,
-// 				page: this.page
-// 			}).then(res => {
-// 				if (isUp) {
-// 					this.listInfo = this.listInfo.concat(res.data)
-// 				} else {
-// 					this.listInfo = res.data
-// 					this.loadingType = 'no-more'
-// 				}
-// 				this.total = res.page.total
-// 			}).catch(err => {
-// 				throw err
-// 			}).finally(() => {
-// 				uni.hideLoading()
-// 				this.pageLoading = false
-// 			})
-// 		},
-// 		//加载列表,上滑加载
-// 		loadData() {
-// 			this.loadingType = 'loading'
-// 			if (this.listInfo.length < this.total) {
-// 				this.page.page++
-// 				this.initDataList(this.listApiName, true)
-// 			} else {
-// 				this.page.page = 1
-// 				this.loadingType = 'no-more'
-// 			}
-// 		}
-// 	}
-// }

+ 31 - 3
src/pagesHome/homeAddress/index.vue

@@ -2,7 +2,7 @@
   <view class="home-address">
     <page-navbar bgColor="#fff" title="地址"></page-navbar>
     <view class="address-update fl-flex-item">
-      <view class="fl-flex fl-align-center">
+      <view class="fl-flex fl-align-center" @click="handelManual">
         <u--image
           src="/static/pagesHome/payment-success.png"
           width="44rpx"
@@ -11,7 +11,7 @@
         <view class="f-s-28 text-primary u-m-l-8">地图定位</view>
       </view>
       <view class="address-line"></view>
-      <view class="fl-flex fl-align-center">
+      <view class="fl-flex fl-align-center" @click="handleUpdateAddress">
         <u--image
           src="/static/pagesHome/payment-success.png"
           width="44rpx"
@@ -23,7 +23,10 @@
     <base-card padding="24rpx" radius="8rpx">
       <view class="fl-flex-item u-m-b-32">
         <view class="f-s-28 text-333 text-bold">常用地址</view>
-        <view class="fl-flex fl-align-center">
+        <view
+          class="fl-flex fl-align-center"
+          @click="$u.route('/PageMine/address/index')"
+        >
           <view class="f-s-24 text-666">更多</view>
           <u-icon name="arrow-right" color="#666" size="16"></u-icon>
         </view>
@@ -48,6 +51,31 @@
 <script>
 export default {
   name: 'home-address',
+  methods: {
+    handelManual() {
+      uni.chooseLocation({
+        success: res => {
+          let { longitude, latitude } = res;
+          let data = { longitude, latitude };
+          this.$store.dispatch('getLocationNow', data).then(() => {
+            uni.$u.route('/pages/home/index');
+          });
+        },
+      });
+    },
+    handleUpdateAddress() {
+      uni.getLocation({
+        type: 'gcj02',
+        success: res => {
+          let { longitude, latitude } = res;
+          let data = { longitude, latitude };
+          this.$store.dispatch('getLocationNow', data).then(() => {
+            uni.$u.route('/pages/home/index');
+          });
+        },
+      });
+    },
+  },
 };
 </script>
 

+ 1 - 1
src/pagesHome/popularNearby/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="recommend-hot">
     <page-navbar :hasBack="true" bgColor="#fff" :title="getTitle"></page-navbar>
-    <base-list :list="listData" @click="handlerRouterSkip"></base-list>
+    <base-list :list="initList" @click="handlerRouterSkip"></base-list>
   </view>
 </template>