静态页面

package.json

@@ -41,6 +41,7 @@
     "@tarojs/runtime": "3.0.14",
     "@tarojs/taro": "3.0.14",
     "fast-deep-equal": "^3.1.3",
+    "node-sass": "^5.0.0",
     "react": "^16.10.0",
     "react-dom": "^16.10.0"
   },

src/app.config.js

@@ -1,7 +1,7 @@
 export default {
   pages: [
-    'pages/ShouYe/index', // tab-首页
     'pages/ShouYe/HuoDong/index', // 首页-活动
+    'pages/ShouYe/index', // tab-首页
     'pages/ShouYe/ZiXun/index', // 首页-资讯
 
     'pages/WuYe/index', // tab-物业

src/components/ScrollPage/index.css

@@ -0,0 +1,29 @@
+.ScrollPage {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.ScrollPage .ScrollPageContent {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  min-height: 100%;
+  z-index: 2;
+}
+.ScrollPage .ScrollPageContent > .ScrollPageBottom {
+  width: 100%;
+  height: 80px;
+}
+.ScrollPage .LoadMoreText {
+  width: 100%;
+  display: block;
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+  z-index: 1;
+  font-size: 28px;
+  color: #999;
+  line-height: 80px;
+  margin-top: -80px;
+}

src/components/ScrollPage/index.jsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function ScrollPage (props) {
+
+  const {IsPullDown = false, IsPullUp = false, HasMore = true, OnRefresh = () => {}, OnPullUp = () => {}} = props
+
+  return (
+    <view className='ScrollPage'>
+      <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={OnRefresh} onscrolltolower={OnPullUp} refresher-triggered={IsPullDown} refresher-background='none'>
+        <view className='ScrollPageContent'>
+          {
+            props.children
+          }
+          <view className='ScrollPageBottom'></view>
+        </view>
+        <text className='LoadMoreText'>{IsPullUp ? '正在加载更多...' : HasMore ? '上拉加载更多' : '已经到底了~'}</text>
+      </scroll-view>
+    </view>
+  )
+}

src/components/ScrollPage/index.less

@@ -0,0 +1,31 @@
+.ScrollPage {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+
+  .ScrollPageContent {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    min-height: 100%;
+    z-index: 2;
+    >.ScrollPageBottom {
+      width: 100%;
+      height: 80px;
+    }
+  }
+
+  .LoadMoreText {
+    width: 100%;
+    display: block;
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+    z-index: 1;
+    font-size: 28px;
+    color: #999;
+    line-height: 80px;
+    margin-top: -80px;
+  }
+}

src/pages/ShouYe/HuoDong/index.jsx

@@ -1,54 +1,49 @@
-import React, { Component } from 'react'
-import ActivityListItem from '../../../components/ActivityListItem/index'
-import '../../../assets/css/reset.less'
-import '../../../assets/css/iconfont.less'
+import React, { useState } from 'react'
+import ActivityListItem from '@/components/ActivityListItem/index'
+import ScrollPage from '@/components/ScrollPage/index'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class ShouYeHuoDong extends Component {
+export default function ShouYeHuoDong (props) {
 
-  state = {
-    ActivityList: ['', '', '', '', '', '', '', ''],
-    IsPull: false
-  }
-
-  componentWillMount () { }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
+  const [ActivityList, setActivityList] = useState(['', '', '', '', '', '', ''])
+  const [IsPullDown, setIsPullDown] = useState(false)
+  const [IsPullUp, setIsPullUp] = useState(false)
+  const [HasMore, setHasMore] = useState(true)
 
-  componentDidShow () { }
-
-  componentDidHide () { }
+  const OnRefresh = () => { // 页面下拉刷新
+    setIsPullDown(true)
+    window.setTimeout(() => {
+      setIsPullUp(false)
+      setHasMore(true)
+      setIsPullDown(false)
+    }, 1000)
+  }
 
-  OnRefresh () { // 页面下拉刷新
-    this.setState({
-      IsPull: true
-    }, () => {
+  const OnPullUp = () => { // 页面上拉加载
+    if (HasMore && !IsPullUp) {
+      setIsPullUp(true)
       window.setTimeout(() => {
-        this.setState({
-          IsPull: false
-        })
+        setIsPullUp(false)
+        setHasMore(false)
       }, 1000)
-    })
+    }
   }
 
-  render () {
-    const { IsPull, ActivityList } = this.state
-    return (
-      <view className='ShouYeHuoDong'>
-        <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background='none'>
-          <view className='ShouYeHuoDongContent'>
-            {
-              ActivityList.map((item, index) => (
-                <view className='ListItem' key={`ActivityItem-${index}`}>
-                  <ActivityListItem Data={item}></ActivityListItem>
-                </view>
-              ))
-            }
-          </view>
-        </scroll-view>
-      </view >
-    )
-  }
+  return (
+    <view className='ShouYeHuoDong'>
+      <ScrollPage IsPullDown={IsPullDown} IsPullUp={IsPullUp} HasMore={HasMore} OnRefresh={OnRefresh} OnPullUp={OnPullUp}>
+        <view className='ShouYeHuoDongContent'>
+          {
+            ActivityList.map((item, index) => (
+              <view className='ListItem' key={`ActivityItem-${index}`}>
+                <ActivityListItem Data={item}></ActivityListItem>
+              </view>
+            ))
+          }
+        </view>
+      </ScrollPage>
+    </view >
+  )
 }

src/pages/ShouYe/index.jsx

@@ -57,6 +57,10 @@ export default function Index(props) {
     }, 1000)
   }
 
+  const OnPullUp = () => {
+    // console.log(111)
+  }
+
   return (
     <Page>
       <view className='ShouYe flex-v'>
@@ -73,7 +77,7 @@ export default function Index(props) {
 
           {/* 正文 */}
           <view className='PageContainer'>
-            <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={OnRefresh} refresher-triggered={IsPull} refresher-background='#f35844'>
+            <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onscrolltolower={OnPullUp} onrefresherrefresh={OnRefresh} refresher-triggered={IsPull} refresher-background='#f35844'>
               <view className='Content'>
 
                 {/* 背景图 */}