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

追逐时光者

发布于 2022-02-15 15:17:56

8840

发布于 2022-02-15 15:17:56

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

//首先在此之前我们先要引用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);

效果图：