Browse Source

fix: 通知中心无法滚动到下一页

lanjianrong 4 years ago
parent
commit
eeb84403f7
1 changed files with 33 additions and 38 deletions
  1. 33 38
      src/pages/Hr/Notification/index.jsx

+ 33 - 38
src/pages/Hr/Notification/index.jsx

@@ -22,7 +22,7 @@ const Notification = () => {
     const {
       data: { message = [], total },
       code = -1
-    } = await queryMessage({ ...params })
+    } = await queryMessage({ ...params, pageSize: state.pageSize })
     if (code === consts.RET_CODE.SUCCESS) {
       setState({
         ...state,
@@ -38,47 +38,42 @@ const Notification = () => {
     initData({ current: 1 })
   }, [])
   const loadMoreData = () => {
-    console.log('11')
     initData({ current: state.current + 1 })
   }
   return (
     <div className="bg-hex-ffffff rounded-md px-6 pb-6">
-      <span className="py-4">通知中心</span>
-      <div style={{ height: 'calc(100vh - 96px - 3.5rem)', overflowY: 'auto' }}>
-        <div id="scrollableDiv">
-          {state.message?.length ? (
-            <InfiniteScroll
-              dataLength={state.message?.length}
-              next={loadMoreData}
-              hasMore={state.hasMore}
-              loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
-              endMessage={<Divider plain>别再滚啦,已是尽头</Divider>}
-              scrollableTarget="scrollableDiv"
-            >
-              <List
-                itemLayout="horizontal"
-                // pagination={{ pageSize: 5 }}
-                dataSource={state.message}
-                renderItem={item => (
-                  <List.Item key={item.id}>
-                    <List.Item.Meta
-                      avatar={<Avatar src={item.avatar} />}
-                      title={<a href="#">{item.title}</a>}
-                      description={
-                        <div className="mb-1">
-                          <Tag color="purple">{msgTypeEnum[item.msgType]}</Tag> '发布于',
-                          <span className="ml-2">全公司</span>
-                        </div>
-                      }
-                    />
-                    {item.content}
-                    <div className="mt-1 text-hex-aaa">{item.createTime}</div>
-                  </List.Item>
-                )}
-              />
-            </InfiniteScroll>
-          ) : null}
-        </div>
+      <h4 className="py-4 text-xl">通知中心</h4>
+      <div id="scrollableDiv" style={{ height: 'calc(100vh - 125px - 3.5rem)', overflowY: 'auto' }}>
+        <InfiniteScroll
+          dataLength={state.total}
+          next={loadMoreData}
+          hasMore={state.hasMore}
+          loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
+          endMessage={<Divider plain>别再滚啦,已是尽头</Divider>}
+          scrollableTarget="scrollableDiv"
+        >
+          <List
+            itemLayout="horizontal"
+            // pagination={{ pageSize: 5 }}
+            dataSource={state.message}
+            renderItem={item => (
+              <List.Item key={item.id}>
+                <List.Item.Meta
+                  avatar={<Avatar src={item.avatar} />}
+                  title={<a href="#">{item.title}</a>}
+                  description={
+                    <div className="mb-1">
+                      <Tag color="purple">{msgTypeEnum[item.msgType]}</Tag> '发布于',
+                      <span className="ml-2">全公司</span>
+                    </div>
+                  }
+                />
+                {item.content}
+                <div className="mt-1 text-hex-aaa">{item.createTime}</div>
+              </List.Item>
+            )}
+          />
+        </InfiniteScroll>
       </div>
     </div>
   )