滚动条 自定义下拉刷新

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

View File

@ -2,14 +2,16 @@
<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 class="project" >
<view @click="projectClick(items,item?.name)" v-for="(items,index) in item.serviceProjectList" :key="index">{{items.name}}</view>
</view>
</view>
</view>
@ -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 () => {

View File

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

View File

@ -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,
current: 1
size: 2,
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">