滚动条 自定义下拉刷新

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

View File

@ -9,7 +9,9 @@
<text>{{ item?.provinceName }}{{ item.cityName }}{{ item.districtsName }}{{ item.streetName }}</text> <text>{{ item?.provinceName }}{{ item.cityName }}{{ item.districtsName }}{{ item.streetName }}</text>
</view> </view>
<view class="project"> <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> </view>
</view> </view>
@ -28,7 +30,9 @@ const getMyServiceProject = async () => {
} }
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)}`,
}) })
} }

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,8 +34,12 @@
</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"
@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 style="border: 1px solid #ccc" v-for="(item,index) in projectData" :key="index">
<view class="projectDetailsTableItem"> <view class="projectDetailsTableItem">
<text>姓名:{{ item?.name }}</text> <text>姓名:{{ item?.name }}</text>
@ -50,6 +54,9 @@
</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">