苏飞论坛

标题: VUE数据加载完成后的执行 [打印本页]

作者: 惜    时间: 2018-12-28 16:53
标题: VUE数据加载完成后的执行
今天,做聊天的时候,遇到一个问题,在加载数据和修改数据,以及发送数据时,需要把滚动条移动最底部。

经过,看文档,百度 ,终于结束这个问题。不说了 直接上代码
[HTML] 纯文本查看 复制代码
    data: function() {
      return {
        content: '',
        messageList: [],
        name:''
      };
    },
    created: function() {
      getHistoryMessages(this); //这里是 第一次加载历史数据的时候
    },
    mounted: function(){
      mounted(this);
    },
    methods: {
      send: function() {
        sendMessage(this);       //发送聊天数据
      }
    },
    watch: {
      $route: function(to, from) {
        getHistoryMessages(this);      //路由改变时,加载当前聊天对象的数据
      }
    },
    updated: function() {                  //在这里加入 ,当数据变更时,引入 .$nextTick 钩子 ,延时执行下面的方法
        this.$nextTick(function() {
              var ele = document.getElementById('dom_id');
              ele.scrollTop = ele.scrollHeight;
        });
    }

作者: 竹林风    时间: 2018-12-28 17:29
看到这帖子真是高兴!
作者: 站长苏飞    时间: 2018-12-29 08:25
我只是路过打酱油的。
作者: 范范    时间: 2018-12-29 08:29
激动人心,无法言表!
作者: Amy    时间: 2018-12-29 14:23
强烈支持楼主ing……




欢迎光临 苏飞论坛 (http://www.sufeinet.com/) Powered by Discuz! X3.4