html的接口没有page参数怎么实现下拉刷新

html-css013

html的接口没有page参数怎么实现下拉刷新,第1张

既然是分页, 那肯定会保存有当前页了, 一般都是放到url里面去保存, 比如这样 url?currentPage=3

写个js, 记得select里面的option要给个id 可以定义为 optionid_3

window.onload = function(){

//先获取URL参数

var url = location.href

var paraString = url.substring(url.indexOf("?")+1,url.length).split("&")

for(var i=0i<paraString.lengthi++){

var paramName = paraString.substring(0, paraString.indexOf("="))

var value = paraString.substring(paraString.indexOf("=")+1)

if(paramName == "currentPage"){//这个currentPage就是你传的当前页了

document.getElementByid("optionid_"+value).selected = "selected"

}

}

}

近期的项目是使用react+antd-mobile的h5移动网页端的一个程序,其中一个功能是一个展示列表,具有下拉刷新和上滑加载更多的一个功能,下面就介绍一下这个功能的具体实现;

首先这里我用了antd-mobile的listView和RefreshControl的组件,想了解更多的可以去官网看看 https://mobile.ant.design/docs/react/introduce-cn

(PS:我当时用这个组件的时候,API还没有这么完善,大部分都是去react-native的官方文档中查看的,等我做完了再来看官网就几本跟新的差不多了,也是一把辛酸泪呀~~~~看来官网的维护还是很好的)

这里说一下,如果你要用到RefreshControl的一些监听事件的话,最好吧antd-mobile版本更新一下(最少更新到1.6.1以上),低版本的不支持它的一些监听事件,会报错,如:Uncaught TypeError: this.refs.lv.getInnerViewNode is not a function,版本更新一下就好了。

https://github.com/ant-design/ant-design-mobile/issues/1723

还有个比较重要的是listView的dataSource属性的参数问题需要注意一下,可以参考 https://reactnative.cn/docs/0.26/listviewdatasource.html

接下来就看一下具体的实现过程:

首先引入用到的组件

import { RefreshControl, ListView, Toast, List } from 'antd-mobile'

使用ListView,在ListView中使用RefreshControl

下拉刷新

上滑加载更多,实现分页