Nondeterministic Programming Methodology

    @cross2d/react-web-swrefresh

    1.0.0 • Public • Published

    react-native-swRefresh

    -- ##react-native-swRefresh是提供react-native下拉刷新和下拉加载组件,简单好用,支持自定义,支持iOS,Android 。 ###提供SwRefreshScrollView和SwRefreshListView两种支持下拉刷新的组件,SwRefreshListView支持上拉加载更多。 实现方式不一样 所以Android体验可能稍微有点不同。 ####因为刚接触,改着改着就有点冗余,代码不是很优美,会慢慢优化的.

    ##介绍:简书上有更详细的介绍

    1. SwRefreshScrollView

    兼容ScrollView的属性

    • props:
    /**
    * 刷新数据时的操作, 参数 end:function 操作结束时执行end() 以结束刷新状态
    */
    onRefresh:PropTypes.func,
    /**
    * 需要返回一个自定义的刷新视图,
    * 参数:
    *  refresStatus:RefreshStatus, 0 下拉以刷新 1 松开以刷新 2 刷新中
    *  offsetY:number 下拉的距离 用于自定义刷新
    */
    customRefreshView:PropTypes.func,
    /**
    * 如果自定义刷新视图 需要传递这个视图的高度 默认视图情况下 此属性无效
    */
    customRefreshViewHeight:PropTypes.number
    • func:
    /**
    * 手动调用刷新
    */
    beginRefresh()
      
    /**
    * 手动结束 推荐end()回调
    */
    endRefresh()

    2. SwRefreshListView

    兼容ListView, SwRefreshScrollView属性 新增endLoadMore方法

    • props:
    /**
    * 自定义底部部刷新指示组件的渲染方法,
    * 参数
    */
    customLoadMoreView:PropTypes.func,
    /**
    * 处于pushing(加载更多时)状态时执行的方法
    * 参数:end,最后执行完操作后应该调用end(isNoMoreData)。
    * isNoMoreData 表示当前是否已经加载完所有数据 已无更多数据
    */
    onLoadMore:PropTypes.func,
    /**
    * //默认样式中的上拉加载更多的提示语
    */
    pusuToLoadMoreTitle:PropTypes.string,
    /**
    * //默认样式中正在加载的提示语
    */
    loadingTitle:PropTypes.string,
    /**
    * //默认样式中已无更多时的提示语
    */
    noMoreDataTitle:PropTypes.string,
    /**
    * 是否显示底部的加载更多 通常用于全部数据不足一页 底部还显示加载更多导致的难看
    */
    isShowLoadMore:PropTypes.bool
    • func:
    /**
    * 重置已无更多数据的状态 通常用于下拉刷新数据完毕后 重置状态
    */
    resetStatus()
    /**
    * 直接将状态置为没有更多数据状态 通常用于第一次刷新加载的后数据已全部加载 不必下拉刷新
    * 也可使用 isShowLoadMore:PropTypes.bool将上拉加载组件隐藏
    */
    setNoMoreData()
    
    /**
    * 手动调用刷新
    */
    beginRefresh()
      
    /**
    * 手动结束 推荐end()回调
    */
    endRefresh()
    /*
     * 手动结束加载
     * isNoMoreData 表示当前是否已经加载完所有数据 已无更多数据
     * */
     endLoadMore(isNoMoreData)

    ##使用: npm install react-native-swRefresh --save

    • 导入
    //根据需要引入
    import {
      SwRefreshScrollView,
      SwRefreshListView,
      RefreshStatus, //刷新状态 用于自定义
      LoadMoreStatus //上拉加载状态 用于自定义
    } from 'react-native-swRefresh'
    • Demo: SwRefreshScrollView
    	<SwRefreshScrollView
    		onRefresh={this._onRefresh.bind(this)}
    		//其他你需要设定的属性(包括ScrollView的属性)
    	>
    		<View style={styles.content}>
    			<Text>下拉刷新ScrollView</Text>
    		</View>
    	</SwRefreshScrollView>
    	-------------------------------------------------------------------------------
    	/**
    	* 模拟刷新
    	* @param end
    	* @private
    	*/
    	_onRefresh(end){
    		let timer =  setTimeout(()=>{
    		 clearTimeout(timer)
    		 alert('刷新成功')
    		
    		 end()//刷新成功后需要调用end结束刷新
    		
    		},1500)
    	}
    • Demo: SwRefreshListView
     <SwRefreshListView
        dataSource={this.state.dataSource}
        ref="listView"
        renderRow={this._renderRow.bind(this)}
        onRefresh={this._onListRefersh.bind(this)}
        onLoadMore={this._onLoadMore.bind(this)}
       //其他需要设置的ListView属性
    />
     -------------------------------------------------------------------------------
     /**
       * 模拟刷新
       * @param end
       * @private
       */
      _onListRefersh(end){
        let timer =  setTimeout(()=>{
          clearTimeout(timer)
          this._page=0
          let data = []
          for (let i = 0;i<10;i++){
            data.push(i)
          }
          this.setState({
            dataSource:this._dataSource.cloneWithRows(data)
          })
          this.refs.listView.resetStatus() //重置上拉加载的状态
          end()//刷新成功后需要调用end结束刷新
    	// this.refs.listView.endRefresh() //新增方法 结束刷新 建议使用end() 。当然这个可以在任何地方使用
        },1500)
      }
    	
      /**
       * 模拟加载更多
       * @param end
       * @private
       */
      _onLoadMore(end){
        let timer =  setTimeout(()=>{
          clearTimeout(timer)
          this._page++
          let data = []
          for (let i = 0;i<(this._page+1)*10;i++){
            data.push(i)
          }
          this.setState({
            dataSource:this._dataSource.cloneWithRows(data)
          })
          end(this._page > 2)//加载成功后需要调用end结束刷新 假设加载4页后数据全部加载完毕
    	
        },2000)
      }
      
     componentDidMount() {
       let timer = setTimeout(()=>{
         clearTimeout(timer)
          this.refs.listView.beginRefresh()
        },500) //自动调用开始刷新 新增方法
      }

    ###具体查看Demo ###演示

    image


    image


    image


    image

    Install

    npm i @cross2d/react-web-swrefresh

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • colin3dmax