添加翻页

miniapp/pages/yuecai/location/index.vue

@@ -1,19 +1,19 @@
 <template>
-  <page-theme :theme="theme">
-    <template>
-      <view class="f-30 p-t-20 p-b-20">
-        <view class="col-info-d t-c m-b-30">搜索框</view>
-        <u-list @scrolltolower="scrolltolower">
-          <u-list-item v-for="(item, index) in list" :key="index">
-            <u-cell :title="item.name" @click="toDetail(item.id)">
-              <u-avatar slot="icon" shape="square" size="35" :src="item.cover"
-                customStyle="margin: -3px 5px -3px 0"></u-avatar>
-            </u-cell>
-          </u-list-item>
-        </u-list>
-      </view>
-    </template>
-  </page-theme>
+  <view class="width-100 height-100 view-page">
+    <view class="p-10">
+      <u-search :clearabled="true" placeholder="请输入搜索关键字" v-model="keyword" :shape="square" search="doRefresh" @custom="doRefresh"></u-search>
+    </view>
+    <u-list @scrolltolower="scrolltolower" height="calc(100% - 180px)" lowerThreshold="10">
+      <u-list-item v-for="(item, index) in list" :key="index">
+        <u-cell :title="item.name" @click="toDetail(item.id)">
+          <u-avatar slot="icon" shape="square" size="35" :src="item.cover"
+            customStyle="margin: -3px 5px -3px 0"></u-avatar>
+        </u-cell>
+      </u-list-item>
+      <u-loadmore :status="page.status" :loading-text="page.loadingText" :loadmore-text="page.loadmoreText"
+        :nomore-text="page.nomoreText" />
+    </u-list>
+  </view>
 </template>
 
 <script>
@@ -22,21 +22,30 @@
     mixins: [themeMixins],
     data() {
       return {
+        list1: [
+          'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+          'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+          'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+        ],
         page: {
           current: 1,
           size: 10,
-          total: 0
+          total: 0,
+          // loadmore loading nomore
+          status: 'loadmore',
+          loadingText: '正在加载中',
+          loadmoreText: '上拉加载更多',
+          nomoreText: '没有更多了'
         },
-        searchKey: '',
+        keyword: '',
         list: []
       }
     },
+    onShow() {
+      this.keyword = '';
+      this.doRefresh();
+    },
     methods: {
-      doSearch() {
-        this.page.current = 1;
-        this.list = [];
-        this.getLocationList();
-      },
       scrolltolower() {
         this.loadmore()
       },
@@ -44,25 +53,45 @@
         this.page.current++;
         this.getLocationList();
       },
+      doRefresh() {
+        this.page.current = 1;
+        this.page.status = 'loadmore'
+        this.list = [];
+        this.getLocationList();
+      },
       getLocationList() {
-        this.$u.api.getLocationList().then(res => {
+
+        if (this.page.status == 'loading' || this.page.status == 'nomore') {
+          // 防止重复下拉
+          return;
+        }
+        this.page.status = 'loading';
+        //
+        this.$u.api.getLocationList(this.page.current, this.page.size, {
+          name: this.keyword || ''
+        }).then(res => {
           if (res.data.records && res.data.records.length > 0) {
             this.list.push(...res.data.records)
           }
           this.page.total = res.data.total || 0;
+          if (this.page.size * this.page.current >= res.data.total) {
+            this.page.status = 'nomore'
+          } else {
+            this.page.status = 'loadmore'
+          }
         })
       },
       toDetail(id) {
         uni.navigateTo({
-          url: "/pages/yuecai/location/detail/index?id=" + id
+          url: "/pages/yuecai/location/detail/index?id=" + id,
         })
       }
     },
-    onLoad(options) {
-      this.getLocationList()
-    },
   }
 </script>
 
 <style scoped lang="scss">
+  .view-page {
+    overflow: hidden;
+  }
 </style>

miniapp/pages/yuecai/restaurant/index.vue

@@ -1,19 +1,19 @@
 <template>
-  <page-theme :theme="theme">
-    <template>
-      <view class="f-30 p-t-20 p-b-20">
-        <view class="col-info-d t-c m-b-30">搜索框</view>
-        <u-list @scrolltolower="scrolltolower">
-          <u-list-item v-for="(item, index) in list" :key="index">
-            <u-cell :title="item.name" @click="toDetail(item.id)">
-              <u-avatar slot="icon" shape="square" size="35" :src="item.cover"
-                customStyle="margin: -3px 5px -3px 0"></u-avatar>
-            </u-cell>
-          </u-list-item>
-        </u-list>
-      </view>
-    </template>
-  </page-theme>
+  <view class="width-100 height-100 view-page">
+    <view class="p-10">
+      <u-search :clearabled="true" placeholder="请输入搜索关键字" v-model="keyword" :shape="square" search="doRefresh" @custom="doRefresh"></u-search>
+    </view>
+    <u-list @scrolltolower="scrolltolower" height="calc(100% - 180px)" lowerThreshold="10">
+      <u-list-item v-for="(item, index) in list" :key="index">
+        <u-cell :title="item.name" @click="toDetail(item.id)">
+          <u-avatar slot="icon" shape="square" size="35" :src="item.cover"
+            customStyle="margin: -3px 5px -3px 0"></u-avatar>
+        </u-cell>
+      </u-list-item>
+      <u-loadmore :status="page.status" :loading-text="page.loadingText" :loadmore-text="page.loadmoreText"
+        :nomore-text="page.nomoreText" />
+    </u-list>
+  </view>
 </template>
 
 <script>
@@ -22,21 +22,30 @@
     mixins: [themeMixins],
     data() {
       return {
+        list1: [
+          'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+          'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+          'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+        ],
         page: {
           current: 1,
           size: 10,
-          total: 0
+          total: 0,
+          // loadmore loading nomore
+          status: 'loadmore',
+          loadingText: '正在加载中',
+          loadmoreText: '上拉加载更多',
+          nomoreText: '没有更多了'
         },
-        searchKey: '',
+        keyword: '',
         list: []
       }
     },
+    onShow() {
+      this.keyword = '';
+      this.doRefresh();
+    },
     methods: {
-      doSearch() {
-        this.page.current = 1;
-        this.list = [];
-        this.getDishList();
-      },
       scrolltolower() {
         this.loadmore()
       },
@@ -44,25 +53,45 @@
         this.page.current++;
         this.getDishList();
       },
+      doRefresh() {
+        this.page.current = 1;
+        this.page.status = 'loadmore'
+        this.list = [];
+        this.getRestaurantList();
+      },
       getRestaurantList() {
-        this.$u.api.getRestaurantList().then(res => {
+
+        if (this.page.status == 'loading' || this.page.status == 'nomore') {
+          // 防止重复下拉
+          return;
+        }
+        this.page.status = 'loading';
+        //
+        this.$u.api.getRestaurantList(this.page.current, this.page.size, {
+          name: this.keyword || ''
+        }).then(res => {
           if (res.data.records && res.data.records.length > 0) {
             this.list.push(...res.data.records)
           }
           this.page.total = res.data.total || 0;
+          if (this.page.size * this.page.current >= res.data.total) {
+            this.page.status = 'nomore'
+          } else {
+            this.page.status = 'loadmore'
+          }
         })
       },
       toDetail(id) {
         uni.navigateTo({
-          url: "/pages/yuecai/restaurant/detail/index?id=" + id
+          url: "/pages/yuecai/restaurant/detail/index?id=" + id,
         })
       }
     },
-    onLoad(options) {
-      this.getRestaurantList()
-    },
   }
 </script>
 
 <style scoped lang="scss">
+  .view-page {
+    overflow: hidden;
+  }
 </style>