React：吸顶+滚动tab联动

preview1.png

在这篇文章中，我将演示如何使用React创建一个tab不固定在顶部，滑动到顶部自动吸顶。点击tab切换滚动到指定位置，滑动界面滚动到指定商品分类时，tab跟随切换。

preview2.png

最终要实现的效果是这样的：

stickypreview.gif

创建react工程

如果之前没有开发过react项目的话，需要首先安装一下脚手架：

npm install -g create-react-app

安装完脚手架后就可以开始创建项目了,我们创建一个名称为sticky-demo的工程：

create-react-app sticky-demo

运行一下试试吧：

cd sticky-demo
npm start

运行后的界面是这样的：

npmstart.png

引入 antd-mobile

具体如何导入可以查看官方文档

安装antd-mobile:

npm install antd-mobile --save

然后需要安装：

npm install react-app-rewired customize-cra --save-dev

修改package.json文件如下：

"scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test --env=jsdom",
        "eject": "react-scripts eject"
   }

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

接着使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

修改成如下：

const { 
    override, 
    fixBabelImports, 
    addLessLoader,
    addDecoratorsLegacy,
    addWebpackResolve
} = require('customize-cra');

const path = require('path')

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true
    }),
    addDecoratorsLegacy(),
    addWebpackResolve({
        extensions: ['.js', '.jsx', '.json'],
        alias: {
        }
    })
);

添加完依赖后，就可以继续下面的工作了。因为这里我们用到了antd-mobile的Tabs组件。

添加less依赖：

npm i less
npm i less-loader

构建界面

添加一个stickyPage的文件，添加index.jsx和index.less

import React, { useState } from 'react';

const StickyPage = (props) => {
    return (
        StickyPage
    )
}
export default StickyPage;

打开根目录index.js，将import APP from './App'注释，添加import StickyPage from './stickyPage/index'

修改后如下：

//import APP from './App'
import StickyPage from './stickyPage/index'

然后将ReactDOM.render中的APP改为StickyPage。保存，看界面是不是发生了变化。

来到stickyPage/index.jsx文件,引入已经写好的Header组件。修改代码如下：

//index.jsx
import React, { useState } from 'react';
import { Header } from "@com";
import './index.less';

const StickyPage = (props) => {
    return (
        
            
            
            
        
    )

}

export default StickyPage;

样式是这样的：

//index.less
.ft_detail {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    &__ft_body {
        position: relative;
        flex: 1;
        flex-direction: column;
        background: orange;
        }
}

运行后界面是这样的：

empty.png

Header组件

Header组件的代码如下
index.jsx

import React from 'react'
import { NavBar, Icon } from "antd-mobile";

import './index.less'

class Header extends React.Component {

    iconOffset = () => {
        const w = document.documentElement.clientWidth;
        let style = { marginLeft: 15 }
        if(w < 375) {
            style = { marginLeft: 5 }
        }

        return style;
    }

    render() {
        return (
            
                
                            
                             {
                                    if(this.props.appClose) {
                                        this.props.appClose()
                                    }else {
                                        window.appClose && window.appClose()
                                    }
                                }}
                            />
                        
                    }
                    rightContent={this.props.rightContent || []}
                    className={'headerComponent__navBar'}
                    style={{fontWeight:'bold'}}
                >
                    { this.props.title || this.props.children }

React：吸顶+滚动tab联动

创建react工程

引入 antd-mobile

构建界面

Header组件

设置滑动吸顶

添加Tabs并点击滚动到指定位置

解决吸顶元素遮挡

滑动界面切换tab

如何解决滑动缓冲问题

进一步优化

你可能感兴趣的:(React：吸顶+滚动tab联动)