debug

src/components/TopTabs/index.jsx

@@ -3,19 +3,20 @@ import {Tabs} from 'antd-mobile'
 import './index.less'
 
 const tabs = [
-    { title: '基本信息', sub: 'basic' },
-    { title: '详情附件', sub: 'adjunct' },
-    { title: '流程信息', sub: 'flow' },
-    { title: '流转意见', sub: 'option' },
+    { title: '基本信息', key: 'basic' },
+    { title: '详情附件', key: 'adjunct' },
+    { title: '流程信息', key: 'flow' },
+    { title: '流转意见', key: 'option' },
 ]
 
 const Index = (props) => {
     return (
         <div>
             <Tabs
+                page={props.page}
                 tabs={tabs}
                 initialPage={"basic"}
-                onChange={(tab, index) => props.onClick(tab.sub)}
+                onChange={(tab, index) => props.onClick(tab.key, index)}
             />
         </div>
     );

src/pages/EventProcessing/Process.jsx

@@ -20,17 +20,17 @@ class Process extends Component {
     constructor() {
         super();
         this.optionBlur = this.optionBlur.bind(this)
-        // this.handleScroll = this.handleScroll.bind(this)
+        this.handleScroll = this.handleScroll.bind(this)
         this.state = {
+            current: 'basic',
             disabled: true,
             footStatus: false,
             footButton: '处理'
         }
     };
     componentDidMount() {
-        // console.log(document.getElementsByClassName("option-text")[0])
         document.getElementsByClassName("option-text")[0].addEventListener('focus', this.optionBlur, true)
-        // window.addEventListener('scroll', this.handleScroll, true);
+        window.addEventListener('scroll', this.handleScroll, true);
     }
     optionBlur = () => {
         this.setState({footButton: '确认发送', footStatus: true})
@@ -38,25 +38,36 @@ class Process extends Component {
 
     componentWillUnmount() {
         document.getElementsByClassName("option-text")[0].removeEventListener('focus', this.optionBlur, true)
-        // window.removeEventListener('scroll', this.handleScroll, true);
+        window.removeEventListener('scroll', this.handleScroll, true);
     }
-    // handleScroll() {
-    //     const basic = document.getElementById("event-basic").offsetTop;
-    //     const adjunct = document.getElementById("event-adjunct").offsetTop;
-    //     const flow = document.getElementById("event-flow").offsetTop;
-    //     const option = document.getElementById("event-option").offsetTop;
-    //     const top = document.documentElement.scrollTop;
-    //
-    //     console.log(top)
-    //
-    //     // console.log(basic, adjunct, flow, option);
-    // };
+    handleScroll() {
+        const adjunct = document.getElementById("event-adjunct").offsetTop;
+        const flow = document.getElementById("event-flow").offsetTop;
+        const option = document.getElementById("event-option").offsetTop;
+        const event = document.getElementById('event');
+        const top = event.scrollTop;
+        const scrollHeight = event.scrollHeight;
+        const clientHeight = event.clientHeight
+
+        if (top >= 0 && top < adjunct - 9) {
+            this.setState({current: 'basic'})
+        }else if (top >= adjunct && top < flow - 9) {
+            this.setState({current: 'adjunct'})
+        }else if (top >= flow && top < option - 9) {
+            this.setState({current: 'flow'})
+        }else if (top >= option) {
+            this.setState({current: 'option'})
+        }
+        if (top + clientHeight == scrollHeight) {
+            this.setState({current: 'option'})
+        }
+    };
     tabClick = (name) => {
-        // console.log(document.getElementsByClassName("option-text"))
+        this.setState({current: name})
         name === 'option' && document.getElementsByClassName("option-text")[0].focus();
         name === 'option' && this.optionBlur()
         const top = document.getElementById(`event-${name}`).offsetTop;
-        document.getElementById("event").scrollTo(0,top - 9)
+        document.getElementById("event").scrollTo(0,top - 9);
     };
     textClick = () => {
         const top = document.getElementById(`event-option`).offsetTop;
@@ -74,7 +85,7 @@ class Process extends Component {
                 wrapProps,
             },
             (buttonIndex) => {
-                console.log(buttonIndex)
+                // console.log(buttonIndex)
             });
     };
     optionChange = val => {
@@ -82,11 +93,11 @@ class Process extends Component {
     }
 
     render() {
-        console.log(this.props.match.params);
-        const {footButton, disabled, footStatus} = this.state
+        console.log(this.state.current);
+        const {footButton, disabled, footStatus, current} = this.state
         return (
             <div>
-                <TopTabs onClick={this.tabClick}/>
+                <TopTabs page={current} onClick={this.tabClick}/>
                 <div id="event">
                     <WingBlank>
                         <WhiteSpace/>
@@ -104,7 +115,7 @@ class Process extends Component {
                         {!footStatus && (
                             <img alt="" src="/img/process-edit.png" className="process-edit"/>
                         )}
-                        {this.state.footButton}
+                        {footButton}
                     </div>
 
                 </div>