react better-scroll 编写类似手机chrome的header显示隐藏效果
关键代码
const H = 50; // header的高度
const H2 = H / 2;
let cy = 0;
class Home extends Component {
@observable top = 0;
@observable ms = 0;
onScroll = ({ y }) => {
let scrollLength = Math.abs(y - cy);
if (y < cy) {
l("paeg up");
if (this.top >= -H) {
const newTop = this.top - scrollLength;
this.top = Math.max(newTop, -H);
}
} else if (y > cy) {
// l("page down");
if (this.top <= 0) {
let newTop = this.top + scrollLength;
this.top = Math.min(newTop, 0);
}
} else {
// l("没动");
}
if (cy !== y) cy = y; // 保存这一次的值,在下一次作比较
};
onScrollEnd = ({ y }) => {
const top = Math.abs(this.top);
this.ms = 200;
if (top <= H2) {
l("show");
this.top = 0;
} else {
l("hide");
this.top = -H;
}
this.ms = 0;
};
render() {
const { classes } = this.props;
return (
<div class={classes.root}>
{/* hedaer */}
<HomeHeader top={this.top} ms={this.ms} />
<div className={classes.wraper}>
<Scroll
onScroll={this.onScroll}
onScrollEnd={this.onScrollEnd}
bounce={false}
>
<div> ... </div>
</Scroll>
</div>
</div>
);
}
}
class HomeHeader extends Component {
render() {
const { top, ms } = this.props;
return (
<AppBar
color="inherit"
position="fixed"
style={{
transition: `transform ${ms}ms ease`,
transform: `translateY(${top}px)`,
}}
> ... </AppBar>
);
}
}
react better-scroll 编写类似手机chrome的header显示隐藏效果的更多相关文章
- JS编写类似弹出窗口样式显示层
JSp中增加div <!-- 提交变更申请 --> <div id="changeWindow" class="easyui-window" ...
- WinForm实现类似QQ停靠,显示隐藏过程添加特效效果
原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右 ...
- 真机调试之android手机+chrome
真机调试之android手机+chrome 虽然chrome上的移动设备模拟器很强大,但是在真机运行的时候,总会遇到一些小问题,这时就需要使用真机调试了. 第一步:准备一台android手机,并在手机 ...
- Appium(Python)驱动手机Chrome浏览器
手机Chrome浏览器访问淘宝H5与在电脑上访问淘宝H5是一摸一样的: 第一种方法: 直接在电脑Chrome浏览器上打开F12: 第二种方法: 手机连接电脑后, 在手机Chrome浏览器上打开淘宝H5 ...
- 【Python】[技术博客] 一些使用Python编写获取手机App日志的操作
一些使用Python编写获取手机App日志的操作 如何获取手机当前打开的App的包名 如何获取当前App进程的PID 如何查看当前App的日志 如何将日志保存到文件 如何关闭进程 如何不显示命令行窗口 ...
- 手机软件Toast无法显示提示信息
近日在做项目时,测试组的同事提出一个bug,就是在一台LG手机上,原本应该显示的Toast信息,都不显示,消息栏也没有出现通知,后来经过查资料知道有些三星.LG手机默认禁用了显示通知那一项,而不显示通 ...
- EditTextPreference点击后输入框显示隐藏内容,类似密码输入(转)
http://bbs.anzhuo.cn/thread-928131-1-1.html EditTextPreference点击后输入框显示隐藏内容,类似密码输入... [复制链接] aski ...
- scroll事件实现监控滚动条并分页显示示例(zepto.js)
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
- 手机自带的显示基站命令(android手机定位,iphone基站定位)
手机自带的显示基站命令(安卓手机定位,苹果手机基站定位) 分类: 通信和网络2012-02-07 17:48 1734人阅读 评论(0) 收藏 举报 手机htciphone中兴三星网络 安卓手机自带快 ...
随机推荐
- [Nuget]使用Nuget管理工具包
摘要 这里演示如何使用Nuget对类库进行打包,并将类库上传到nuget上面. 步骤 1.在nuget官网注册账号,并登陆. https://www.nuget.org 2.下载Nuget.exe,并 ...
- 咏南新CS三层开发框架
咏南新CS三层开发框架 咏南WEB桌面框架演示:47.106.93.126:9999 咏南WEB手机框架本地:47.106.93.126:8077 咏南CS框架下载:https://pan.baidu ...
- python3 HTTP Error 403:Forbidden
问题描述初学python,在用python中的urllib.request.urlopen()和urllib.request.urlretrieve方法打开网页时,有些网站会抛出异常: HTTP Er ...
- [Vuex] Lazy Load a Vuex Module at Runtime using TypeScript
Sometimes we need to create modules at runtime, for example depending on a condition. We could even ...
- Git-Book
关于git的文档https://git-scm.com/book/zh/v2
- 【C++】C++中类的基本使用
1.类和成员声明,定义,初始化的基本规则 C++中类的基本模板如下: namespace 空间命名{//可以定义namespace,也可以不定义 class/struct 类名称{ public/pr ...
- 在Python中定义和使用抽象类的方法
https://www.jb51.net/article/87710.htm 像java一样python也可以定义一个抽象类. 在讲抽象类之前,先说下抽象方法的实现. 抽象方法是基类中定义的方法,但却 ...
- OC 与 js 界面JSBridge交互
// 1.新建WebView self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds]; [self.view addSubv ...
- Unity3D中录制和输出wav文件
近期在做视频录制方面的事情,看了下音频的录制和输出.主要参考官方的FrameCapturer: https://github.com/unity3d-jp/FrameCapturer wav文件结构较 ...
- word,excel,ppt,txt转换为 PDF
/// <summary> /// 将word文档转换成PDF格式 /// </summary> /// <param name="sourcePath&quo ...