Mui Webview下来刷新上拉加载实现

2022-02-15 15:17:56 浏览数 (1)

  有些事情经历过之后才会发现,原来再次之前我是如此的啥,因为是第一次做,毫无头绪,有时会想假如有个一demo就好了,那么就不会花费这么多的无用功了。今天使用mui 的webview实现了一个H5页面的上拉加载下拉刷新的效果,拿出来和大家一起分享一下,希望各位博友有用,当然啦有的时候坑会很多,但是只要我们学会用思考的方式去找问题,不管是什么问题我们都是可以解决的。小弟的文采不好,有错误请指出来,一定虚心接受

代码语言:javascript复制
//首先在此之前我们先要引用jquery的插件,以及mui.js插件
<!--html代码-->
<!--需要加载的容器-->
 <div class="shop-list font-16 col-1 mui-scroll-wrapper mui-content" id="refreshContainer">
<!--mui-scroll是否允许滑动-->
<div class="mui-scroll">
<!--重点mui-table-view mui-table-view-chevron这里是页面加载那些的文字样式-->
<ul class="mui-table-view mui-table-view-chevron" id="list">
</ul>
</div>
</div>

<!--MUIWEBvIEW分页-->
<script type="text/javascript">
$(function () {
 //需要显示的条数
var size = 3;
 //页码
var page = 1;
//下拉刷新监听事件(这里可以直接去mui文档中复制)
mui.init({
pullRefresh: {
container: '#refreshContainer',
//下拉刷新
down: {
height: 50,//可选,默认50.触发下拉刷新拖动距离,
auto:false,//可选,默认false.自动上拉加载一次
callback: function () {//必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
//5毫秒显示
window.setTimeout(function () {
//向下刷新重新赋值 
page = 1;
size = 3;
//调用获取数据的方法
DtGetData(size, page);

效果图:

0 人点赞