前言：fac是什么？

• feffery-antd-components（简称fac），是国内大佬费弗里(Feffery)老师基于著名的React UI组件库ant design进行二次开发，将ant design中的诸多实用组件及特性引入Dash，帮助开发者使用极低的纯Python代码量，即可快速开发出现代化的交互式web应用，将你有关web应用的美好憧憬✨高效地实现。
  

• 作为一个开源项目，任何人都可以以任何形式，免费使用它，来打造你心中理想的web应用。

• 目前fac处于快速迭代期，更多更新的功能请移步官网：

  • fac项目官方仓库：https://github.com/CNFeffery/feffery-antd-components
  • fac项目官网：http://fac.feffery.tech

• 我（岳涛@心馨电脑）在CSDN发布的fac系列学习笔记得到了费弗里(Feffery)老师本人的许可。为了方便更多的fac初学者入门，我把官网的示例代码片段扩充成一个个完整的小项目，适当添加了注释或补充，拿来即用。通过学习fac，我的个人体会是：如果你不是前端开发工程师，暂时不想或没有时间深入前端技术的学习，fac比Vue更适合你。

“人生苦短，我用Python；Web开发，首选Feffery！”

---

↓↓↓ 今日笔记 ↓↓↓

---

二、fac其他：AntdBackTop回到顶部

2.1 语法与参数

2.1.1 语法

AntdBackTop(id, className, style, *args, **kwargs)
1

2.1.2 主要参数说明

• duration： float型，默认为0.45

  用于设置点击组件后回到顶部所需时间，单位秒

• visibilityHeight： int型，默认为400

  用于设置开始出现回到顶部组件对应的滚动条像素高度阈值

• containerId： string型

当回到顶部组件位于局部滚动页面内时（典型如本在线文档中的所有组件说明页），用于绑定position为relative的祖先容器作为位置计算的参考，从确保回到顶部组件可以正确监听对应容器的滚动事件

2.2 使用示例

2.2.1 回到顶部示例

import dash
from dash import html, dcc
import feffery_antd_components as fac
from dash.dependencies import Input, Output, State

# 实例化dash
app = dash.Dash(__name__)

# dash布局
app.layout = html.Div(
    [
        # 基础使用

        html.Div(
            [
                fac.AntdBackTop(
                    containerId='back-top-container-demo',
                    duration=1  # 点击组件后回到顶部所需时间，单位秒
                ),
                fac.AntdTitle(
                    '向下滑动一段距离',
                    level=4
                )
            ] + [
                html.Div(
                    [
                        i if i % 2 == 0 else html.Br() for i in range(200)
                    ]
                )
            ],
            id='back-top-container-demo',
            style={
                'maxHeight': '500px',
                'overflowY': 'auto',
                'position': 'relative',
                'backgroundColor': 'rgba(240, 240, 240, 0.2)',
                'padding': '20px'
            }
        )

    ],
    style={
        'margin': '1rem',
        'padding': '1rem',
    }
)

# 启动服务
if __name__ == '__main__':
    app.run_server(debug=True)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51