博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react-native-scrolltotop 回到顶部-组件 (ios/android)
阅读量:4086 次
发布时间:2019-05-25

本文共 1103 字,大约阅读时间需要 3 分钟。

react-native-scrolltotop

https://github.com/yzsolo/react-native-scrolltotop

a RN component make list come back to top.

IOS && ANDROID

 --- 

Installation

npm install --save react-native-scrolltotop

Usage example

see the example/example.js for a more detailed example.

import ScrollTopView from 'react-native-scrolltotop';  //first set default state in your constructor  constructor(props) {    //...    this.state = {      isShowToTop: false,    };  }  //then bind a method to detect the scroll distance of your listView  //set ref with 'listview'  
this._onScroll(e)} style={
styles.listView} renderScrollComponent={(props)=>{ return
}}/> //here is the _onScrol method _onScroll(e) { var offsetY = e.nativeEvent.contentOffset.y; if(offsetY > 100) { this.setState({ isShowToTop: true }) } else { this.setState({ isShowToTop: false }) } }//use it with your listView together
消息列表
{listView} {
this.state.isShowToTop?
:null}

转载地址:http://vyeni.baihongyu.com/

你可能感兴趣的文章
微信小程序 Audio API
查看>>
[React Native]react-native-scrollable-tab-view(进阶篇)
查看>>
Vue全家桶+Mint-Ui打造高仿QQMusic,搭配详细说明
查看>>
React Native for Android 发布独立的安装包
查看>>
React Native应用部署/热更新-CodePush最新集成总结(新)
查看>>
react-native-wechat
查看>>
基于云信的react-native聊天系统
查看>>
网易云音乐移动客户端Vue.js
查看>>
ES7 await/async
查看>>
ES7的Async/Await
查看>>
React Native WebView组件实现的BarCode(条形码)、(QRCode)二维码
查看>>
每个人都能做的网易云音乐[vue全家桶]
查看>>
JavaScript专题之数组去重
查看>>
Immutable.js 以及在 react+redux 项目中的实践
查看>>
Vue2.0全家桶仿腾讯课堂(移动端)
查看>>
React+Redux系列教程
查看>>
react-native 自定义倒计时按钮
查看>>
19 个 JavaScript 常用的简写技术
查看>>
ES6这些就够了
查看>>
微信小程序:支付系列专辑(开发指南+精品Demo)
查看>>