滚动条 自定义下拉刷新

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) {
-    const store = useCounterStore()
+    try {
-    const token = Taro.getStorageSync('token')
+      const store = useCounterStore()
-    if(token){
+      const token = Taro.getStorageSync('token')
-       Taro.switchTab({
+      console.log(token)
-           url:'/pages/mine/mine'
+      if (token) {
-       })
+        Taro.switchTab({
-      store.setSelected(2)
+          // url:'/pages/mine/mine'
-    }else{
+          url: '/pages/projectManager/index/index'
-      console.log(2222)
+
+        })
+        // store.setSelected(2)
+      } else {
+        console.log(2222)
+      }
+      console.log('App onShow.')
+    } catch (err) {
+      console.log(err)
+
     }
-    console.log('App onShow.')
+
   },
   // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
 })

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

@@ -2,15 +2,17 @@
   <view class="myProject">
     <view class="myProjectItem" v-for="(item,index) in myProjectList" :key="index">
       <view style="display: flex;justify-content: space-between">
-        <text>{{item?.name}}</text>
+        <text>{{ item?.name }}</text>
         <!--<text>进行中</text>-->
       </view>
       <view class="myProjectIndex">地址：
-        <text>{{item?.provinceName}}{{item.cityName}}{{item.districtsName}}{{item.streetName}}</text>
+        <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>
-       <view class="project" >
-         <view @click="projectClick(items,item?.name)" v-for="(items,index) in item.serviceProjectList" :key="index">{{items.name}}</view>
-       </view>
     </view>
   </view>
 </template>
@@ -27,9 +29,11 @@ const getMyServiceProject = async () => {
   myProjectList.value = resp.data
 }
 
-const projectClick = (items:ServiceProjectList,name:string)=>{
+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)}`,
+
+    url: `/subPages/pages/projectDetails/projectDetails?name=${name}&item=${JSON.stringify(items)}`,
   })
 }
 onMounted(async () => {

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,22 +34,29 @@
     </view>
     <!--表格-->
     <view class="projectDetailsTableDrop">
-      <view class="projectDetailsTable" >
+      <view>项目人员</view>
-        <view>项目人员</view>
+      <scroll-view :scroll-y="true" style="height: 500rpx;" @scrolltoupper="upper" @scrolltolower="lower"
-        <view style="border: 1px solid #ccc" v-for="(item,index) in projectData" :key="index">
+                   @scroll="scroll" :scroll-into-view="toView" :scroll-top="scrollTop" refresherEnabled="true"
-          <view class="projectDetailsTableItem">
+                   @refresherrefresh="onRefresherRefresh" :refresher-triggered="isRefresher"
-            <text>姓名:{{ item?.name }}</text>
+      >
-            <text>性别:{{ item.sex.label }}</text>
+        <view class="projectDetailsTable">
-            <text>职位:{{ item.workPost }}</text>
+          <view style="border: 1px solid #ccc" v-for="(item,index) in projectData" :key="index">
-            <text>保安证件:{{ item.securityNumber }}</text>
+            <view class="projectDetailsTableItem">
+              <text>姓名:{{ item?.name }}</text>
+              <text>性别:{{ item.sex.label }}</text>
+              <text>职位:{{ item.workPost }}</text>
+              <text>保安证件:{{ item.securityNumber }}</text>
               <text>地址:{{ item.homeAddress }}</text>
               <text>出生年月:{{ item.dateOfBirth }}</text>
               <text>创建时间:{{ item.createTime }}</text>
               <text>身份证:{{ item.idCard }}</text>
+            </view>
           </view>
-        </view>
 
-      </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">