之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个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. Vue项目环境搭建(node+webpack)

    安装node.js 下载地址:https://nodejs.org/en/download/ node -v //查看node.js版本 项目环境配置: 安装vue-cli:npm install - ...

  2. Spring MVC核心技术

    目录 异常处理 类型转换器 数据验证 文件上传与下载 拦截器 异常处理 Spring MVC中, 系统的DAO, Service, Controller层出现异常, 均通过throw Exceptio ...

  3. java基础笔记(8)----接口

    接口 是特殊的抽象类,纯抽象类---所有方法都是抽象方法 接口和抽象类的区别: 相同点: 编译后,会分别生成对应的.class文件 都不能创建对象(实例化),但是可以生成引用(使用多态) 不同点: 抽 ...

  4. Linux下的 >, >>, <, ps, |, grep, /dev/null

    1 要将命令行运行的结果保存到文件中,truncate模式下使用 >,append模式下使用 >> ls > ~/test.txt 2 要将文件中的内容作为标准输入,应使用 & ...

  5. spring整合springmvc和hibernate

    上篇文章使用maven搭建了web环境,这篇来记录下如何使用spring整合springmvc和hibernate,亦即spring+springmvc+hibernate框架整合. 第一步:首先配置 ...

  6. 在Nginx上配置多个站点

    有时候你想在一台服务器上为不同的域名运行不同的站点.比如www.siteA.com作为博客,www.siteB.com作为论坛.你可以把两个域名的IP都解析到你的服务器上,但是没法在Nginx的根目录 ...

  7. aix 6.1系统怎么安装?这里有详细图文教程

    今年六月,我们公司出现了一次非常严重的数据丢失的事故.生产服务器崩溃导致所有的业务都陷于停滞,而且由于涉及到公司机密又无法贸然到数据恢复公司进行恢复,可是自己又无法解决.权衡利弊还是决定找一家有保密资 ...

  8. C++ 异常小记

    catch必定使用拷贝构造函数 如下代码编译不通过,因为拷贝构造被标记delete #include <stdexcept> #include <cstdlib> #inclu ...

  9. 常用的汇编指令 movs stos

    movsb   把寄存机esi所存的地址的数据以字节复制到edi movsw  把寄存机esi所存的地址的数据以word复制到edi movsd   把寄存机esi所存的地址的数据以dword复制到e ...

  10. SpringCloud用户自定义配置信息的定义和查看

    一.概念 在SpringCloud项目中,用户自己定义的配置信息也可以放在application.*,需要以 info打头,以便使用公用基础设施 /info 查看! 本文讲解基于 ConfigServ ...