滚动条 自定义下拉刷新

collect_information/src/app.ts

@@ -3,24 +3,34 @@ import {createPinia} from 'pinia'
 import {useCounterStore} from '@/store'
 import './app.scss'
 import './assets/scss/colorui.scss'
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+// import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import Taro from "@tarojs/taro";
 
+
 const pinia = createPinia()
-pinia.use(piniaPluginPersistedstate)
+// pinia.use(piniaPluginPersistedstate)
 const App = createApp({
   onShow(options) {
+    try {
       const store = useCounterStore()
       const token = Taro.getStorageSync('token')
+      console.log(token)
       if (token) {
         Taro.switchTab({
-           url:'/pages/mine/mine'
+          // url:'/pages/mine/mine'
+          url: '/pages/projectManager/index/index'
+
         })
-      store.setSelected(2)
+        // store.setSelected(2)
       } else {
         console.log(2222)
       }
       console.log('App onShow.')
+    } catch (err) {
+      console.log(err)
+
+    }
+
   },
   // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
 })

collect_information/src/subPages/pages/myProject/myProject.vue

@@ -9,7 +9,9 @@
         <text>{{ item?.provinceName }}{{ item.cityName }}{{ item.districtsName }}{{ item.streetName }}</text>
       </view>
       <view class="project">
-         <view @click="projectClick(items,item?.name)" v-for="(items,index) in item.serviceProjectList" :key="index">{{items.name}}</view>
+        <view @click="projectClick(items,item?.name)" v-for="(items,index) in item.serviceProjectList" :key="index">
+          {{ items.name }}
+        </view>
       </view>
     </view>
   </view>
@@ -28,7 +30,9 @@ const getMyServiceProject = async () => {
 }
 
 const projectClick = (items: ServiceProjectList, name: string) => {
+  console.log(name, JSON.stringify(items))
   Taro.navigateTo({
+
     url: `/subPages/pages/projectDetails/projectDetails?name=${name}&item=${JSON.stringify(items)}`,
   })
 }

collect_information/src/subPages/pages/projectDetails/projectDetails.scss

@@ -19,7 +19,7 @@
     }
   }
   .projectDetailsTableDrop{
-     height: 800px;
+     height: 500px;
     .projectDetailsTable{
       margin: 20px;
       border-radius: 10px;

collect_information/src/subPages/pages/projectDetails/projectDetails.vue

@@ -34,8 +34,12 @@
     </view>
     <!--表格-->
     <view class="projectDetailsTableDrop">
-      <view class="projectDetailsTable" >
       <view>项目人员</view>
+      <scroll-view :scroll-y="true" style="height: 500rpx;" @scrolltoupper="upper" @scrolltolower="lower"
+                   @scroll="scroll" :scroll-into-view="toView" :scroll-top="scrollTop" refresherEnabled="true"
+                   @refresherrefresh="onRefresherRefresh" :refresher-triggered="isRefresher"
+      >
+        <view class="projectDetailsTable">
           <view style="border: 1px solid #ccc" v-for="(item,index) in projectData" :key="index">
             <view class="projectDetailsTableItem">
               <text>姓名:{{ item?.name }}</text>
@@ -50,6 +54,9 @@
           </view>
 
         </view>
+      </scroll-view>
+
+
     </view>
 
     <view class="projectDetailsButton">
@@ -73,24 +80,60 @@ useLoad(async (options: MyProjectList) => {
   await projectDetailsTable()
 })
 const projectDetailsTable = async () => {
+  // if (total.value === projectData.value.length) return
+  Taro.showLoading({
+    title: '加载中',
+  })
   const queryParams = {
     params: {
       serviceProjectId: detailsList.value?.snowFlakeId,
     },
     page: {
-      size: 6,
+      size: 2,
-      current: 1
+      current: current.value
     }
   }
   const resp = await api.post<ProjectData>('/miniProgramUser/securityUserPager', queryParams)
-  projectData.value = resp?.data.records
+  projectData.value = [...projectData.value, ...resp?.data.records]
-
+  total.value = resp?.data.total
+  isRefresher.value = false
+  Taro.hideLoading()
 }
 const formAdd = () => {
   Taro.navigateTo({url: `/subPages/pages/form/form?item=${JSON.stringify(detailsList.value)}`})
 }
+const total = ref(null)
+const current = ref(1)
+const isRefresher = ref(false)
+const scrollTop = ref(0)
+const toView = ref('demo2')
+const upper = (e) => {
+  console.log('到顶了:', e)
+}
+// 滚动到底部/右边时触发
+const lower = (e) => {
+  if (total.value === projectData.value.length) return
+  if (total.value > projectData.value.length) {
+    console.log('触底了:', e)
+    current.value = current.value + 1
+    projectDetailsTable()
+  }
 
 
+}
+// 自定义下拉刷新被触发
+const onRefresherRefresh = (e) => {
+  projectData.value = []
+  total.value = null
+  current.value = 1   //重置
+  isRefresher.value = true
+  console.log('自定义下拉刷新被触发:', e)
+  projectDetailsTable()
+}
+const scroll = (e) => {
+  // console.log('scroll:', e)
+}
+
 </script>
 <style scoped lang="scss">