miniapp/src/pages/ShouYe/ZiXun/index.jsx

import React, { useState, useEffect } from 'react'
import request, { apis } from '@/utils/request'
import NewsListItem from '@/components/NewsListItem/index'
import ScrollPage from '@/components/ScrollPage/index'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import './index.less'

export default function ShouYeZiXun (props) {

  const [IsPullUp, setIsPullUp] = useState(false)
  const [IsPullDown, setIsPullDown] = useState(false)
  const [HasNextPage, setHasNextPage] = useState(true)
  const [PageNum, setPageNum] = useState(1)
  const [NewsList, setNewsList] = useState([])

  useEffect(() => {
    GetNewsList(() => {
      setIsPullUp(false)
    })
  }, [PageNum])

  const GetNewsList = (done = () => { }) => { // 获取资讯列表
    request({ ...apis.getNewsList, params: { pageNum: PageNum, pageSize: 6 } }).then((res) => {
      if (PageNum === 1) {
        setNewsList([...res.records])
      } else {
        setNewsList(NewsList.concat([...res.records]))
      }
      setHasNextPage(res.current - 0 < res.pages - 0)
      done()
    }).catch(() => {
      done()
    })
  }

  const OnRefresh = () => { // 页面下拉刷新
    setIsPullDown(true)
    setHasNextPage(true)
    setPageNum(1)
    if (PageNum === 1) {
      GetNewsList(() => {
        setIsPullDown(false)
      })
    } else {
      setPageNum(1)
    }
  }

  const OnPullUp = () => {
    if (HasNextPage) {
      setIsPullUp(true)
      setPageNum(PageNum + 1)
    }
  }

  return (
    <view className='ShouYeZiXun'>
      <ScrollPage OnRefresh={OnRefresh} IsPullUp={IsPullUp} IsPullDown={IsPullDown} OnPullUp={OnPullUp} HasMore={HasNextPage}>
        <view className='ShouYeHuoDongContent'>
          {
            NewsList.map((item, index) => (
              <view className='ListItem' key={`ActivityItem-${index}`}>
                <NewsListItem Data={item} ShowTips={index === 0}></NewsListItem>
              </view>
            ))
          }
        </view>
      </ScrollPage>
    </view >
  )
}