分类页修改

src/common/index.js

@@ -7,6 +7,6 @@ export { default as CallApp } from './CallApp'
 export { default as Captcha } from './Captcha'
 export { default as ClearableInput } from "./ClearableInput";
 export { default as Loading } from './Loading'
-export { default as renderTabBar } from './renderTabBar'
+export { default as RenderTabBar } from './renderTabBar'
 
 

src/common/renderTabBar/index.js

 import { Sticky } from 'react-sticky'
-import { Tabs } from "antd-mobile";
-import React from "react";
+import { Tabs } from "antd-mobile"
+import React from "react"
 
-export default function renderTabBar({zIndex = 1, ...rest}) {
+export default function RenderTabBar({topOffset = 0,zIndex = 1, ...rest}) {
     return (
-        <Sticky>
+        <Sticky topOffset={topOffset}>
             {({style}) => <div style={{...style, zIndex}}>
                 <Tabs.DefaultTabBar {...rest}/>
             </div>}

src/components/classify/courselist.js

-import React, {Component} from 'react'
-import {VList} from '../../common'
-import {Tabs, WhiteSpace} from 'antd-mobile'
+import React, { Component } from 'react'
+import { VList } from '../../common'
+import { Tabs, WhiteSpace, Toast } from 'antd-mobile'
 import './courselist.scss'
 import HeaderSearch from '../../common/HeaderSearch/index'
-import {http, getParam} from "@/utils"
-import {Toast} from 'antd-mobile'
-import {Link} from 'react-router-dom'
+import { http, getParam } from "@/utils"
 import Loading from '@/common/Loading'
-import {connect} from 'react-redux';
-import {getCourses} from './../detail/actions';
+import { connect } from 'react-redux';
+import { StickyContainer } from "react-sticky";
+
+
+function stopScroll(e) {
+    e.preventDefault()
+}
 
 @connect(({user}) => ({
     user
@@ -93,7 +96,11 @@ class Classify extends Component {
         this.setState(status => ({
             ispull: !status.ispull,
             display: status.ispull ? 'none' : 'block'
-        }));
+        }), () => {
+            this.state.ispull ? document.addEventListener('touchmove', stopScroll, {
+                passive: false
+            }) : document.removeEventListener('touchmove', stopScroll)
+        });
     }
 
     // 弹窗里面tab点击查询
@@ -108,19 +115,19 @@ class Classify extends Component {
     }
 
     toCourseDetail = (id) => {
-        const { dispatch, history } = this.props;
+        const {dispatch, history} = this.props;
         // dispatch(getCourses(id, () => {
         history.push(`/detail?id=${id}`)
         // }));
     }
 
-    toClassify=()=>{
+    toClassify = () => {
         location.replace('/classify');
     }
 
     render() {
-        const { user ={} } = this.props;
-        let isLogin = user.data && user.data.uid? true : false;
+        const {user = {}} = this.props;
+        let isLogin = user.data && user.data.uid ? true : false;
         const bottom = (
             <i className={'iconfont iconiconfront-69 pull-down'}></i>
         )
@@ -129,7 +136,6 @@ class Classify extends Component {
         )
 
         let page = this.state.allClass.findIndex((item) => item.title === this.state.activeTab)
-
         return (
             <div className='class-child'>
                 <HeaderSearch
@@ -142,21 +148,24 @@ class Classify extends Component {
                         <div onClick={this.pulldown.bind(this)}>
                             {this.state.ispull ? top : bottom}
                         </div>
+                        <StickyContainer>
                             <Tabs
                                 tabs={this.state.allClass}
                                 animated={false}
                                 page={page}
                                 onChange={(tab) => this.ontabclick(tab)}
+                                renderTabBar={props => <div className={'custom-render-bar'}>
+                                    <Tabs.DefaultTabBar {...props}/>
+                                </div>}
                             >
                                 <div className='tabs'>
                                     <ul>
                                         {this.state.data && this.state.data.length > 0 && this.state.data.map((item, index) => {
                                             const Info = (
                                                 <div className="info">
-                                                <p className='title' onClick={() => this.toCourseDetail(item.course_id)}>
-                                                    {/* <Link to={`/detail?id=${item.course_id}`}> */}
+                                                    <p className='title'
+                                                       onClick={() => this.toCourseDetail(item.course_id)}>
                                                         {item.course_title}
-                                                    {/* </Link> */}
                                                     </p>
                                                     <p className='contact text-overflow-2'>{item.desc}</p>
                                                     <div className='des'>
@@ -199,6 +208,8 @@ class Classify extends Component {
                                     </ul>
                                 </div>
                             </Tabs>
+
+                        </StickyContainer>
                         <WhiteSpace/>
                     </div>
                     <div className='mbc-box' style={{display: this.state.display}}>

src/components/classify/courselist.scss

@@ -5,10 +5,29 @@ html,body,#root {
   position: relative;
   height: 100%;
 
+
+  .preferential{
+    width: 100%;
+    height: 44px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10;
+  }
+
   .class-content {
-    padding: 0 12px;
+    padding: 88px 12px 0;
     position: relative;
 
+    .custom-render-bar{
+      position: fixed;
+      top: 43px;
+      left: 0;
+      z-index: 10;
+      padding-left: 11px;
+      background: #fff;
+    }
+
     .v-list-item {
       padding: 10px 0 0;
 
@@ -105,10 +124,10 @@ html,body,#root {
       width: 32px;
       height: 35px;
       line-height: 35px;
-      position: absolute;
-      top: 4px;
+      position: fixed;
+      top: 48px;
       right: 0;
-      z-index: 2;
+      z-index: 20;
       background-color: $bg_fff;
       color: $color_666;
     }
@@ -138,7 +157,7 @@ html,body,#root {
   .mbc-box {
     position: absolute;
     left: 0;
-    top: 88px;
+    top: 87px;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, .6);

src/components/detail/outline/index.js

@@ -5,7 +5,7 @@ import './index.scss'
 import { getParam, http } from "@/utils"
 import { Toast } from 'antd-mobile'
 import { StickyContainer } from "react-sticky";
-import {renderTabBar} from "@/common";
+import {RenderTabBar} from "@/common";
 
 class OutLine extends Component {
     constructor(props) {
@@ -60,7 +60,7 @@ class OutLine extends Component {
                     <Tabs tabs={tabs}
                           initialPage={0}
                           swipeable={false}
-                          renderTabBar={renderTabBar}
+                          renderTabBar={RenderTabBar}
                     >
                         {/*介绍*/}
                         <div className='introduce'>