之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求

  需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过的新消息前面会带着红点标记,点击查看过后红点消失

  方法:

  先引入import {Loadmore } from 'mint-ui';

  HTML:

  <mt-loadmore :top-method="loadTop"
    :bottom-method="loadBottom"
    :bottom-all-loaded="allLoaded"
    ref="loadmore">
    <ul class="ul-box starth" id="ul-box">
      <li class="li-box" v-for="(item,index) in Data" :key="'list'+index" @click="goto_detail(item)">
        <span class="mark"></span>
        <div class="div-box">
          <p class="type">{{item.title}}</p>
        </div>
      </li>
    </ul>
  </mt-loadmore>
 
  JavaScript:
    

  export default {
       data() {
         return {
      griddata:[], //每次加载出来的新数据
      Data:[],  //每次加载累加后的总数据
      allLoaded: false,   //若为真,则 bottomMethod 不会被再次触发
      num:0,  //num为0时表示刷新或第一次加载,每加载一次增加1,刷新时默认为0
      readList:[],  //红点标记
          }
       },
        methods:{
    goto_detail(payload){  //跳转到详情页
      this.$router.push({path:'/detail'})  
    },
    loadTop() {  //下拉刷新
      this.num=0;
      this.update(0,'top');
    },
    loadBottom() {  //上拉加载     
      this.num+=1;
                   let offset = this.num*10  //offset为分页偏移量,这里是每次加载增加十条数据
      this.update(offset,'bottom');
    },
    update(type){  //每次触发上拉加载或下拉刷新时触发的数据接口
      let param = {
        offset: offset,
        number:10,  //每页多少条数据
      }
      news(param).then((ret) => {
        if(ret.status_code==200){
          if(offset==0){  //如果偏移量为0说明是下拉刷新所以Data为刚加载出来的数据
            this.Data=ret.dataInfo
                                 }else{  //偏移量大于0,说明为上拉加载,Data为前面锁加载出来数据的累加
             this.griddata=ret.dataInfo
                                      let len=this.griddata.length
                                      for(let i=0;i<len;i++){
                                          this.Data.push(this.griddata[i])  //将新数据push到Data中
                                      }
                                 }
          let read = ''  //read为接口获取的数据,为是否已读的标记,当为0时未读,为1时已读
          this.readList=[]  //新数组,放所有加载出数据的read值
          for(let i=0;i<this.Data.length;i++){
            this.readList.push(this.Data[i].read);
          }
        }
        //通过传过来的type值不同分辨上拉加载或下拉刷新
        if(type=='top'){  
          this.$refs.loadmore.onTopLoaded();
        }else if(type=='bottom'){
          this.$refs.loadmore.onBottomLoaded();
        }
 
      })
    }
        },  
  updated(){  //只要数据变化就会判断一次数据是否已读过,判断标记的显隐
    let oSpan=document.getElementById("ul-box").getElementsByTagName("span");
    for(let i=0;i<this.readList.length;i++){
      if(this.readList[i]==0){
        oSpan[i].className='mark is-red'
      }else{
        oSpan[i].className='mark'
      }
    }
  },
  created(){  //打开页面首先自动获取一次数据
    let param = {
      offset: 0,  //打开页面相当于初次加载
      number:10,  //每页多少条数据
    }
    news(param).then((ret) => {
      if(ret.status_code==200){
        this.Data=ret.dataInfo
        let read = ''  //read为接口获取的数据,为是否已读的标记,当为0时未读,为1时已读
        this.readList=[]  //新数组,放所有加载出数据的read值
        for(let i=0;i<this.Data.length;i++){
          this.readList.push(this.Data[i].read);
        }
      }
    })
   }   
    }
总结:最好不要给ul-box设置固定高度,这样会上拉加载出现bug,可以多尝试一下,自己写的代码,如有其他问题或者更好的解决方法欢迎交流
   关于文中一些具体方法的解释在另一篇文中有提及,’Vue-上拉加载与下拉刷新(mint-ui:loadmore)一个页面使用多个上拉加载后冲突问题

Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记的更多相关文章

  1. APICloud上啦加载下拉刷新模块

    apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...

  2. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  3. 上拉加载下拉刷新控件WaterRefreshLoadMoreView

    上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...

  4. RecyclerView 上拉加载下拉刷新

    RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...

  5. zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  6. Flutter上拉加载下拉刷新---flutter_easyrefresh

    前言 Flutter默认不支持上拉加载,下拉刷新也仅仅支持Material的一种样式.Android开发使用过SmartRefreshLayout的小伙伴都知道这是一个强大的刷新UI库,集成了很多出色 ...

  7. 利用iscroll实现上拉加载下拉刷新

    1.首先引用isScroll插件 说明:页面加载时初始化isScroll,然后调用pullDownAction()和pullUpAction(),每次切换tab时,只需要对pullDownAction ...

  8. js上拉加载下拉刷新

    写在前边: 工作需要,使用ajax在原来的列表下边使用ajax请求后台数据,拼接在列表最下边,在github转了好久,发现了一个bug极多的js刷新插件,尝试了一个下午,就在快放弃的时候,发现下边有留 ...

  9. 基于better-scroll封装一个上拉加载下拉刷新组件

    1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...

随机推荐

  1. 【Python】 docker-py 用Python调用Docker接口

    [docker-py] 官方文档:[https://docker-py.readthedocs.io/en/stable/images.html] 众所周知,Docker向外界提供了一个API来管理其 ...

  2. 大数据 --> 安装Hadoop-单机模式(1)

    安装Hadoop-单机模式(1) 一.在Ubuntu下创建hadoop组和hadoop用户 1)创建hadoop用户组 sudo addgroup hadoop //添加用户组 2)创建hadoop用 ...

  3. STL --> queue单向队列

    queue单向队列 queue 模板类的定义在<queue>头文件中.与stack 模板类很相似,queue 模板类也需要两个模板参数,一个是元素类型,一个容器类型,元素类型是必要的,容器 ...

  4. mysql新手入门随笔

    1.启动/关闭服务器 第一种方法:通过Notifier 第二种方法: 通过Windows自带的服务管理:计算机右键选择管理弹出框选择"服务和应用程序"里的服务列表,从列表中找到My ...

  5. Loadrunner使用时IE浏览器打不开怎么办

    1.ie浏览器去掉启用第三方浏览器扩展 2.loadrunner11 键盘F4,在browser Emulation点击change,在弹出的提示框中Browser version 选择8.0,pla ...

  6. Fiddler修改请求和响应

    通过设置断点,Fiddler可以做到: 1. 修改HTTP请求头信息.例如修改请求头的UA, Cookie, Referer 信息,通过"伪造"相应信息达到达到相应的目的(调试,模 ...

  7. echarts词云引用

    最近项目中需要使用echarts的词云图,因为几经波折才引用成功,所以想记下来跟大家分享,(我的随笔不会写那么多让人需要动脑子去理解的东西,就是记录一下步骤,因为经验甚少,底层原理懂得不多,所以就先记 ...

  8. Python打包工具setuptools的使用

    将我们写的Python程序发布成包后,可以使其能够安装使用. 在项目上测试的时候,某些情况下,可以将Python打包,然后上传到测试服务器,安装测试. setuptools是常用的打包工具. 一个简单 ...

  9. python内置函数 divmod()

    先来看一下builtins.py中的代码: def divmod(x, y): # known case of builtins.divmod """ Return th ...

  10. C语言第三次作业总结

    本次作业的亮点 总体情况 大部分同学基本掌握了单层循环结构的写法,懂得了代码调试的过程 PTA通过率及作业质量都不错,希望再接再厉 推荐博客 黄毓颖 推荐理由:代码思路清晰,格式良好:调试过程相当形象 ...