Commit e68fcf2b authored by Aivs's avatar Aivs

fix:添加滚动下拉数据

parent eaef2a7b
......@@ -331,4 +331,7 @@
}
.honme .ant-form-item-label > label {
font-size: 12px !important;
}
.scrollY{
overflow-y: auto;
}
\ No newline at end of file
......@@ -13,6 +13,8 @@ const { TabPane } = Tabs;
const Actions: React.FC = () => {
const [msg, setMsg] = useState<string>('')
const [scroll, setScroll] = useState<any>(undefined)
const [cheight,setCheight] = useState<number>(0)
const [columns]=useState<any>([
{
title: '头像',
......@@ -118,8 +120,11 @@ const Actions: React.FC = () => {
let data:any = {...listQuery}
data.wxId=res.userId
const baseItem = await selectUserBase(data)
console.log(baseItem)
if(baseItem.data.data)setListData([...baseItem.data.data])
if(baseItem.data.data){
let list= [...listData]
let data = listQuery.page===1?[...baseItem.data.data]:list.concat([...baseItem.data.data])
setListData(data)
}
}
const inputChange=(e:any)=>{
let Query = {...listQuery}
......@@ -134,9 +139,23 @@ const Actions: React.FC = () => {
const back = ()=>{
history.goBack()
}
//监听滚动条滚动到距离底部50px,获取下一页数据
const handleOnScroll = () => {
if (scroll) {
const contentScrollTop = scroll.scrollTop; //滚动条距离顶部
const clientHeight = scroll.clientHeight; //可视区域
const scrollHeight = scroll.scrollHeight; //滚动条内容的总高度
if (contentScrollTop + clientHeight+50 >= scrollHeight) { //滚动条距离底部50px拉去下一页数据
let Query = {...listQuery}
Query.page=Query.page+1
setListQuery(Query)
getUserBase() // 获取数据的方法
}
}
};
useEffect(() => {
//getUserBase()
setCheight(window.innerHeight-120) //获取屏幕的高度-120,为content高度
}, [])
return (
......@@ -152,7 +171,7 @@ const Actions: React.FC = () => {
tabs.map((item:any,idx:number)=>
<TabPane tab={item} key={idx} >
<div className="content">
<div className="content scrollY" style={{ height: cheight+'px' }} ref={(dom) => {setScroll(dom);}} onScrollCapture={() => handleOnScroll()}>
{idx>0? <p className='detailWord'>暂未开发</p>:listData.length===0? <p className='detailWord'>暂无数据,请输入查询条件</p>:listData.map((list:any,index:number)=>
<div className="customItem">
<div className="flex spaceBetween w100">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment