基于vant-UI框架的vue项目的下拉刷新、上拉加载

叁歲伎倆 2022-04-08 13:54 185阅读 0赞

* 基于vant-UI框架的vue项目的下拉刷新、上拉加载
 * 安装vantUI
 
 npm i vant –S
 
  
 
 main.js
 
 import \{ PullRefresh,List\} from 'vant';
 
 Vue.use(PullRefresh).use(List);
 
  
 
 dom结构
 
 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMDAxMDYx_size_16_color_FFFFFF_t_70][]
 
 里面的API官网都有，可以去vant官网看
 
 这里主要讲解一些逻辑
 
 在data中初始化数据
 
 <table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> <pre style="margin-left:0cm;">pageIndex:1,//页码
 
 dtWinNumberInfos:[],//请求数据
 
 isDownLoading:false,//下拉刷新
 
 isUpLoading:false,//上拉加载
 
 upFinished:false,//上拉加载完毕
 
 offset:100,//滚动条与底部距离小于 offset 时触发load事件</pre> </td> 
 </tr> 
 </tbody> 
 </table>
 
  
 
 上拉加载请求方法
 
 <table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> <pre style="margin-left:0cm;">onLoadList(){
 
 &nbsp; this.pageIndex++;
 
 &nbsp; this.isUpLoading = true &nbsp; this._ getOpenDetail();//ajax请求
 
 },</pre> </td> 
 </tr> 
 </tbody> 
 </table>
 
  
 
 下拉刷新方法
 
 <table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> <pre style="margin-left:0cm;">onDownRefresh(){
 
 &nbsp; this.pageIndex=1
 
 &nbsp; this.isDownLoading = true &nbsp; this._ getOpenDetail();
 
 },</pre> </td> 
 </tr> 
 </tbody> 
 </table>
 
  
 
 具体请求方法
 
  
 
  
 
 <table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> <pre style="margin-left:0cm;">async _getOpenDetail(){
 
 &nbsp; await getOpenDetail (this.lottery,this.pageIndex,10).then(data =&gt;{
 
 &nbsp;&nbsp;&nbsp; if(data.error === '0'){
 //请求成功
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(this.dtWinNumberInfos.length){
 //当请求前有数据时 第n次请求
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(this.isUpLoading){
 // 上拉加载
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.dtWinNumberInfos = this.dtWinNumberInfos.concat(data.dtWinNumberInfo) //上拉加载新数据添加到数组中
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.$nextTick(()=&gt;{ //在下次 DOM 更新循环结束之后执行延迟回调
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.isUpLoading = false&nbsp; //关闭上拉加载中
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; })
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(data.dtWinNumberInfo.length&lt;10){
 //没有更多数据
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.upFinished = true&nbsp;&nbsp; //上拉加载完毕
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(this.isDownLoading){
 //关闭下拉刷新
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.isDownLoading = false //关闭下拉刷新中
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.dtWinNumberInfos = data.dtWinNumberInfo&nbsp; //重新给数据赋值
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(this.upFinished){ //如果上拉加载完毕为true则设为false。解决上拉加载完毕后再下拉刷新就不会执行上拉加载问题
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.upFinished = false &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;}
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }else{
 //当请求没有数据时 第一次请求
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.dtWinNumberInfos = data.dtWinNumberInfo
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
 
 &nbsp;&nbsp;&nbsp; }
 
 &nbsp; })
 
 }</pre> </td> 
 </tr> 
 </tbody> 
 </table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMDAxMDYx_size_16_color_FFFFFF_t_70]: /images/20220404/931017e2a4954f39a720d16967d4dc3a.png