✨ feat(首页): 联调推荐活动分页功能

hookehuyr
Commit e6d4c4440b4f92eae1195ae925efaa788ec6f146 e6d4c444 1 parent 35dc8a76
Showing 5 changed files with 85 additions and 22 deletions
package-lock.json
package.json
src/components/navbar.vue
src/pages/index/index.vue
yarn.lock
--- a/package-lock.json
View file @e6d4c44
+++ b/package-lock.json
View file @e6d4c44
@@ -11,6 +11,7 @@
       "dependencies": {
         "@babel/runtime": "^7.7.7",
         "@tarojs/components": "3.4.10",
+        "@tarojs/extend": "^3.5.7",
         "@tarojs/plugin-framework-react": "^3.4.10",
         "@tarojs/plugin-framework-vue3": "3.4.10",
         "@tarojs/plugin-html": "^3.4.10",
@@ -2505,6 +2506,12 @@
         "weui": "^1.1.2"
       }
     },
+    "node_modules/@tarojs/extend": {
+      "version": "3.5.7",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@tarojs%2fextend/-/extend-3.5.7.tgz",
+      "integrity": "sha512-duVxMBtmafSH751zztv3RCOH1D1LbNZhhV0Gnvtla4/6R1DUBTONBs1KWg1O5ED4FQsv7TGCvwWSetBqEYYD6g==",
+      "license": "MIT"
+    },
     "node_modules/@tarojs/helper": {
       "version": "3.4.10",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@tarojs%2fhelper/-/helper-3.4.10.tgz",
@@ -21119,6 +21126,11 @@
         "weui": "^1.1.2"
       }
     },
+    "@tarojs/extend": {
+      "version": "3.5.7",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@tarojs%2fextend/-/extend-3.5.7.tgz",
+      "integrity": "sha512-duVxMBtmafSH751zztv3RCOH1D1LbNZhhV0Gnvtla4/6R1DUBTONBs1KWg1O5ED4FQsv7TGCvwWSetBqEYYD6g=="
+    },
     "@tarojs/helper": {
       "version": "3.4.10",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@tarojs%2fhelper/-/helper-3.4.10.tgz",
--- a/package.json
View file @e6d4c44
+++ b/package.json
View file @e6d4c44
@@ -36,6 +36,7 @@
   "dependencies": {
     "@babel/runtime": "^7.7.7",
     "@tarojs/components": "3.4.10",
+    "@tarojs/extend": "^3.5.7",
     "@tarojs/plugin-framework-react": "^3.4.10",
     "@tarojs/plugin-framework-vue3": "3.4.10",
     "@tarojs/plugin-html": "^3.4.10",
--- a/src/components/navbar.vue
View file @e6d4c44
+++ b/src/components/navbar.vue
View file @e6d4c44
@@ -6,7 +6,7 @@
  * @Description: 底部导航栏
 -->
 <template>
-  <view class="navbar-page">
+  <view id="navbar-page" class="navbar-page">
     <view @tap="goTo('home')" class="home">
       <view style="height: 2rem;">
         <van-icon :name="icon_home" size="2rem" color="" />
--- a/src/pages/index/index.vue
View file @e6d4c44
+++ b/src/pages/index/index.vue
View file @e6d4c44
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-18 14:44:50
+ * @LastEditTime: 2022-10-20 11:51:22
  * @FilePath: /swx/src/pages/index/index.vue
  * @Description: 首页
 -->
 <template>
-  <view>
+  <view id="page-header">
-    <swiper class='slide-box' indicatorColor='#94B294' indicatorActiveColor='#FFFFFF' current="current"
+    <view>
-      :duration="duration" :interval="interval" :circular="isCircular" :autoplay="isAutoplay"
+      <swiper class='slide-box' indicatorColor='#94B294' indicatorActiveColor='#FFFFFF' current="current"
-      :indicatorDots="hasIndicatorDots">
+        :duration="duration" :interval="interval" :circular="isCircular" :autoplay="isAutoplay"
-      <swiper-item v-for="(item, idx) in carousel" :key="idx">
+        :indicatorDots="hasIndicatorDots">
-        <image @tap="goTo(item.id)" :src="item.cover" class="slide-image" />
+        <swiper-item v-for="(item, idx) in carousel" :key="idx">
-      </swiper-item>
+          <image @tap="goTo(item.id)" :src="item.cover" class="slide-image" />
-    </swiper>
+        </swiper-item>
-  </view>
+      </swiper>
-  <view style="padding: 1rem 1rem 0.5rem 1rem;">
+    </view>
-    <text class="bg-gradient" style="font-size: 1.15rem;">推荐活动</text>
+    <view style="padding: 1rem 1rem 0.5rem 1rem;">
-  </view>
+      <text class="bg-gradient" style="font-size: 1.15rem;">推荐活动</text>
-  <view style="padding: 0 1rem;">
+    </view>
-    <activity-card v-for="(item, index) in activity_list" :key="index" :data="item" status="join"></activity-card>
   </view>
+  <scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower">
+    <view style="padding: 0 1rem;">
+      <activity-card v-for="(item, index) in activity_list" :key="index" :data="item" status="join"></activity-card>
+    </view>
+  </scroll-view>
   <view style="height: 6rem;"></view>
   <navbar activated="home" />
+  <van-toast id="van-toast" />
+
 </template>
 <script setup>
 import Taro from '@tarojs/taro'
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
 import activityCard from '@/components/activity-card.vue'
 import navbar from '@/components/navbar.vue'
-
+import Toast from '@/components/vant-weapp/toast/toast';
-onMounted(async () => {
-})
 const goTo = (id) => {
   Taro.navigateTo({
@@ -50,6 +54,7 @@ wx.showShareMenu({
 <script>
 import "./index.less";
 import { activityHomeAPI } from '@/api/Host/index'
+import { $ } from '@tarojs/extend'
 export default {
   name: "indexPage",
@@ -94,12 +99,28 @@ export default {
   },
   async onShow () {
     // 获取活动和轮播信息
-    const { code, data } = await activityHomeAPI();
+    const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit });
     if (code) {
       this.activity_list = data.activity_list;
       this.carousel = data.carousel;
+      this.page = this.page + 1;
     }
   },
+  onHide () { // 离开当前页面
+    this.page = 0;
+    this.flag = true;
+  },
+  mounted () {
+    // 设置滚动列表可视高度
+    const windowHeight = wx.getSystemInfoSync().windowHeight;
+    setTimeout(async () => {
+      const headerHeight = await $('#page-header').height();
+      const navHeight = await $('#navbar-page').height();
+      this.scrollStyle = {
+        height: windowHeight - headerHeight - navHeight + 'px'
+      }
+    }, 500);
+  },
   data() {
     return {
       current: 1,
@@ -109,10 +130,34 @@ export default {
       isAutoplay: false,
       hasIndicatorDots: true,
       activity_list: [],
-      carousel: []
+      carousel: [],
+      flag: true,
+      page: 0,
+      limit: 3,
+      scrollStyle: { height: '1000rpx' }
     };
   },
   methods: {
+    onScrollToLower () {
+      if(!this.flag){
+        return
+      }
+      this.flag = false;
+      this.getList();
+    },
+    async getList () {
+      // 获取推荐活动列表
+      const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit });
+      if (code) {
+        if (data.activity_list.length) {
+          this.activity_list = this.activity_list.concat(data.activity_list);
+          this.page = this.page + 1;
+          this.flag = true;
+        } else {
+          Toast('到底了')
+        }
+      }
+    }
   },
   // TODO：分享内容待设置
   onShareAppMessage(options) {
--- a/yarn.lock
View file @e6d4c44
+++ b/yarn.lock
View file @e6d4c44
@@ -1305,6 +1305,11 @@
     "swiper" "6.8.0"
     "weui" "^1.1.2"
+"@tarojs/extend@^3.5.7":
+  "integrity" "sha512-duVxMBtmafSH751zztv3RCOH1D1LbNZhhV0Gnvtla4/6R1DUBTONBs1KWg1O5ED4FQsv7TGCvwWSetBqEYYD6g=="
+  "resolved" "https://mirrors.cloud.tencent.com/npm/@tarojs%2fextend/-/extend-3.5.7.tgz"
+  "version" "3.5.7"
+
 "@tarojs/helper@3.4.10":
   "integrity" "sha512-lu1KrFhusPowrljRkmoFiaOATtiPwPe+WfCbPbIa7gzM6ek+VqwNBVFeIebwyZwL8j2F1wWkk5zJAsyha/hqzw=="
   "resolved" "https://mirrors.cloud.tencent.com/npm/@tarojs%2fhelper/-/helper-3.4.10.tgz"