网上搜了好多,但是千篇一律,而且代码全粘过来也没有实现效果,也不知道那些人是怎么做出来的,咱也不敢给人胡乱评论,还是自己开个帖子记录下来吧。
首先引进jQuery weui的各种文件,巴拉巴拉,
它的原理是将下拉显示的文字隐藏到上面去,有个margin-top=-50px;,如果你的头部没有这么大的高度就自己改一下,顺便改一下头部设置成position:relative;然后再引用它的成品代码,废话不多说了直接上代码把
{extend name="/public/baseyjs"} {block name="title"} <title>库存盘点</title> {/block} {block name="style"} <style> body { background: #f5f5f5; } .main { overflow-y: scroll; overflow-x: hidden; } * { box-sizing: border-box; } .py { color: #99CC00; } .pk { color: #CC3333; } .title { color: #ff8500; } .status { color: #FF0033; } .two { color: #999; font-size: 14px; } .item { width: 98%; background: #fff; padding: 5px; margin: 5px auto; border-radius: 5px; } .weui-pull-to-refresh { margin-top:-35px; } .header { position: relative; z-index:500; } </style> {/block} {block name="main"} {include file="/public/header2" title="库存盘点"} <div class="main weui-pull-to-refresh"> <div class="weui-pull-to-refresh__layer"> <div class=‘weui-pull-to-refresh__arrow‘></div> <div class=‘weui-pull-to-refresh__preloader‘></div> <div class="down">下拉刷新</div> <div class="up">释放刷新</div> <div class="refresh">正在刷新</div> </div> <div class="list"></div> </div> {/block} {block name="js"} <script> var n = 1, page = 1, lastpage = 1, loading = false $(function () { getList(page) $(".main").infinite(20).on("infinite", function () { if (loading) return; page = page + 1 if(page > lastpage){ $.toast(‘没有更多了‘,‘text‘) return } loading = true; getList(page) }) $(".main").pullToRefresh(function () { page = 1 n = 1 getList(page) }); $(".main").on("pull-to-refresh", function() { //do something 这里还没细研究 }); let height = document.documentElement.clientHeight let headerHeight = $(".header").height() $(".main").height(height - headerHeight) }) function getList(page) { $.showLoading(‘加载中‘) $.ajax({ url: ‘/weixin/car/pandianlist‘, data: {page}, type: ‘get‘, success: (res) => { lastpage = res.last_page if (page == 1) { $(".list").empty() } var txt = ‘‘ for (let v of res.data) { txt += `<div class="item"> <div class="one title">[${n}]单号:${v.dm}( <span class="status">${v.wcbz == 1 ? ‘已完成‘ : ‘未完成‘}</span> )</div> <div class="two">库存托盘数:${v.SL} 盘盈:<span class="py">${v.pysl}</span> 盘亏:<span class="pk">${v.pksl}</span></div> <div class="three">日期:${v.rq}</div> </div>` n++ } $(".list").append(txt) loading = false $.hideLoading() $(".main").pullToRefreshDone(); } }) } </script> {/block}
这是我的页面。如果有需要自己拿去改改吧,也不是很难