Jquery mobile 下拉刷新 怎么弄
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery mobile 下拉刷新 怎么弄相关的知识,希望对你有一定的参考价值。
参考技术A 加上一个scroll.js就好了。答题不易,互相帮助,手机提问的朋友在客户端右上角评价点满意即可.
如认可我的回答,请点击采纳为满意回答按钮. 参考技术B 用插件iscroll4.百度一下就知道了。官方文档例子都很全
antd-mobile的下拉刷新上拉加载使用
在使用antd-mobile有用到下拉刷新上拉加载
>import { NavBar, Icon ,Tabs , ListView , PullToRefresh } from 'antd-mobile'; // 这是我这个页面要的的组件
贴出我所有的代码,可以直接复制,我的这个是自定义的下来刷新上拉加载
>// 新闻列表
import React, { Component } from 'react';
import { NavBar, Icon ,Tabs , ListView , PullToRefresh } from 'antd-mobile';
import '../../pageCss/newsList/newsList.css'
import {findGardenInfoAll} from '../../api/newsList/newsListApi'
class News extends Component {
constructor(props){
super(props)
const dataSource = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
this.state={
tabs:[
{ title: '全部', sub: '1' },
{ title: '园区动态', sub: '2' },
{ title: '木业资讯', sub: '3' }
],
tabsIndex:0,//tab选择的
newsList:[],//数据
dataSource:dataSource, //列表的初始化
refreshing: true, //下拉刷新
isLoading: true, //文字显示
pages:{
pageNum:1,//第几页
pageSize:10,//每页多少
type:0,//列表的类型
}
}
}
query(pages){//数据请求
let _this = this;
findGardenInfoAll(pages).then(res=>{
if(res.pages>=this.state.pages.pageNum){
_this.state.pages.pageNum++;
this.state.newsList = [...this.state.newsList,...res.list]
this.setState({
newsList:this.state.newsList,
dataSource: this.state.dataSource.cloneWithRows(this.state.newsList),
isLoading: false,
pages:_this.state.pages,
});
}else {
_this.setState({
isLoading: false
})
}
_this.setState({
refreshing:false
})
})
}
onRefresh = () => { //下拉刷新
this.state.pages.pageNum = 1;
this.setState({ refreshing: true, isLoading: true ,pages:this.state.pages,newsList:[]});
setTimeout(() => {
this.query(this.state.pages)
}, 600);
}
onEndReached = (event) => {//触底加载
if (this.state.isLoading) {
return;
}
this.setState({ isLoading: true });
setTimeout(() => {
this.query(this.state.pages)
}, 600);
}
render() {//我们列表展示的数据样式等
const row = (rowData, sectionID, rowID) => {
return (
<div key={rowID} style={{ height:'1rem',marginTop:'0.1rem',background:'#ffffff'}}>
<div>{rowData.messageTitle}</div>
</div>
);
};
return (
<div id="news-container" className='boxContent'>
<div className='page'>
<NavBar mode="light" icon={<Icon type="left" />} onLeftClick={() => this.props.history.go(-1)}>
新闻资讯 </NavBar>
{/*---*/}
<div className='newsBox'>
<Tabs tabs={this.state.tabs} onTabClick={(tab, index) => {
this.state.pages.type = index;
this.state.pages.pageNum = 1;
this.setState({ refreshing: true, isLoading: true ,pages:this.state.pages,newsList:[]});
this.query(this.state.pages);
}}></Tabs>
{/*----*/}
<div className='newsBoxList'>
<ListView
ref={el => this.lv = el}
dataSource={this.state.dataSource}
renderFooter={() => (<div style={{ textAlign: 'center' }}>
{this.state.isLoading ? '加载中...' : '已加载全部'}
</div>)}
renderRow={row}
style={{
height: '100%',
overflow: 'auto',
}}
pullToRefresh={<PullToRefresh
refreshing={this.state.refreshing}
onRefresh={this.onRefresh}
/>}
scrollRenderAheadDistance={500}
onEndReached={this.onEndReached}
onEndReachedThreshold={10}
/>
</div>
</div>
</div>
</div>
)
}
componentDidMount(){
setTimeout(() => {
this.query(this.state.pages)
// this.rData = genData();
// this.setState({
// dataSource: this.state.dataSource.cloneWithRows(this.rData),
// isLoading: false,
// });
}, 600);
}
}
export default News;
效果如下
github上有react的demo已经搭建好环境,拦截,统一token等等
https://github.com/liqiangsheng/react-demo.git
这是我demo的,如果多个页面要我封装了方法引入用
>//下拉加载的方法
/***
//* pages分页
// *api请求数据
// *_this= this
// *dataSource下拉刷新的实例
// *isLoading加载
// * refreshing下拉刷新
//* dataList数据
//* ***/
export function loadingMore(api,pages,_this,dataSource,isLoading,refreshing,dataList) {
api(pages).then(res=>{
if(res.pages>=pages.pageNum){
pages.pageNum++;
dataList = [...dataList,...res.list]
_this.setState({
dataList:dataList,
dataSource: dataSource.cloneWithRows(dataList),
isLoading: false,
pages:pages,
});
}else {
_this.setState({
isLoading: false
})
}
_this.setState({
refreshing:false
})
})
}
以上是关于Jquery mobile 下拉刷新 怎么弄的主要内容,如果未能解决你的问题,请参考以下文章