滚动条 自定义下拉刷新

This commit is contained in:
TimSpan 2024-09-13 11:05:54 +08:00
parent 6a7bdfd316
commit 0c0bbe89df
4 changed files with 91 additions and 34 deletions

View File

@ -3,24 +3,34 @@ import {createPinia} from 'pinia'
import {useCounterStore} from '@/store' import {useCounterStore} from '@/store'
import './app.scss' import './app.scss'
import './assets/scss/colorui.scss' import './assets/scss/colorui.scss'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' // import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import Taro from "@tarojs/taro"; import Taro from "@tarojs/taro";
const pinia = createPinia() const pinia = createPinia()
pinia.use(piniaPluginPersistedstate) // pinia.use(piniaPluginPersistedstate)
const App = createApp({ const App = createApp({
onShow(options) { 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 所覆盖 // 入口组件不需要实现 render 方法,即使实现了也会被 taro 所覆盖
}) })

View File

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

View File

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

View File

@ -34,22 +34,29 @@
</view> </view>
<!--表格--> <!--表格-->
<view class="projectDetailsTableDrop"> <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.homeAddress }}</text>
<text>出生年月:{{ item.dateOfBirth }}</text> <text>出生年月:{{ item.dateOfBirth }}</text>
<text>创建时间:{{ item.createTime }}</text> <text>创建时间:{{ item.createTime }}</text>
<text>身份证:{{ item.idCard }}</text> <text>身份证:{{ item.idCard }}</text>
</view>
</view> </view>
</view>
</view> </view>
</scroll-view>
</view> </view>
<view class="projectDetailsButton"> <view class="projectDetailsButton">
@ -73,24 +80,60 @@ useLoad(async (options: MyProjectList) => {
await projectDetailsTable() await projectDetailsTable()
}) })
const projectDetailsTable = async () => { const projectDetailsTable = async () => {
// if (total.value === projectData.value.length) return
Taro.showLoading({
title: '加载中',
})
const queryParams = { const queryParams = {
params: { params: {
serviceProjectId: detailsList.value?.snowFlakeId, serviceProjectId: detailsList.value?.snowFlakeId,
}, },
page: { page: {
size: 6, size: 2,
current: 1 current: current.value
} }
} }
const resp = await api.post<ProjectData>('/miniProgramUser/securityUserPager', queryParams) 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 = () => { const formAdd = () => {
Taro.navigateTo({url: `/subPages/pages/form/form?item=${JSON.stringify(detailsList.value)}`}) 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">