1. vue进入页面时滚动条始终在底部代码实例

     更新时间:2019年03月26日 15:28:45   作者:sayid760   我要评论

    这篇文章主要介绍了vue进入页面时滚动条始终在底部,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    本文实例为大家分享了vue进入页面时滚动条始终在底部的具体代码,供大家参考,具体内容如下

    mounted () {
     this.scrollToBottom();
    },
    //每次页面渲染完之后滚动条在最底部
    updated:function(){
     this.scrollToBottom();
    },
    methods:{
     scrollToBottom: function () {
      this.$nextTick(() => {
    	 var container = this.$el.querySelector(".chatBox-content-demo");
      container.scrollTop = container.scrollHeight;
      })
    }
    }

    滚动条样式:

    ::-webkit-scrollbar {
     width: 5px;
     height: 5px;
    }
     
    ::-webkit-scrollbar-track-piece {
     background-color: rgba(0, 0, 0, 0.2);
     -webkit-border-radius: 6px;
    }
     
    ::-webkit-scrollbar-thumb:vertical {
     height: 5px;
     background-color: rgba(125, 125, 125, 0.7);
     -webkit-border-radius: 6px;
    }
     
    ::-webkit-scrollbar-thumb:horizontal {
     width: 5px;
     background-color: rgba(125, 125, 125, 0.7);
     -webkit-border-radius: 6px;
    }

     如果使用了better-scroll

    在created()或者mounted () 里都可以
     
    mounted () {
     this.$nextTick(() => {
     this._initScroll();
     let allLi=this.$refs.chatcontheight.querySelectorAll("li");
     this.chartScroll.scrollToElement(allLi[allLi.length-1],0);
     });
    },
    //每次页面渲染完之后滚动条在最底部
    updated:function(){
      this.$nextTick(() => {
    this._initScroll();
    let allLi=this.$refs.chatcontheight.querySelectorAll("li");
    this.chartScroll.scrollToElement(allLi[allLi.length-1],0);
      });
    },
    methods:{
     _initScroll(){
    this.chartScroll=new BScroll(this.$refs.chatcontheight,{
       click:true
      })
    }}
     
    结构
    <div ref="$refs.chatcontheight" style="overflow: hidden;">
      <ul>
     <li></li>
      </ul>
    </div>

    以上所述是小编给大家介绍的vue进入页面时滚动条始终在底部详解整合,希望对大家有所帮助,如果大家有任?#25105;?#38382;请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    相关文章

    • vue事件修饰符和按键修饰符用法总结

      vue事件修饰符和按键修饰符用法总结

      本篇文章主要介绍了vue事件修饰符和按键修饰符用法总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来?#32431;?#21543;
      2017-07-07
    • 解决vue热替换失效的根本原因

      解决vue热替换失效的根本原因

      今天小编就为大家分享一篇解决vue热替换失效的根本原因,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来?#32431;?#21543;
      2018-09-09
    • Vue中的基础过渡动画及实现原理解析

      Vue中的基础过渡动画及实现原理解析

      这篇文章主要介绍了Vue中的基础过渡动画原理解析,需要的朋友可以参考下
      2018-12-12
    • vue小白入门教程

      vue小白入门教程

      vue是一套用于构建用户界面的渐进式框架,本文通过实例给大家介绍了vue入门教程适用小白初学者,非常不错,具有参考借鉴价值,需要的朋友参考下吧
      2018-04-04
    • vue如何集成raphael.js中国地图的方法示例

      vue如何集成raphael.js中国地图的方法示例

      最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间?#25991;?#20010;省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作。本文就给大家介绍了关于利用vue集成raphael.js中国地图的相关资?#24076;?#38656;要的朋友可以参考下。
      2017-08-08
    • vue中选项卡点击?#35874;?#19988;能滑动?#35874;?#21151;能的实现代码

      vue中选项卡点击?#35874;?#19988;能滑动?#35874;?#21151;能的实现代码

      本文通过实例代码给大家介绍了vue中选项卡点击?#35874;?#19988;能滑动?#35874;?#21151;能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下
      2018-11-11
    • vue中使用protobuf的过程记录

      vue中使用protobuf的过程记录

      由于目前公司采用了ProtoBuf做前后端数据交互,进公司以来一直用的是公司大神写好的基础库,完全不了解底层是如何解析的。下面小编给大家分享vue中使用protobuf的过程记录,需要的朋友参考下吧
      2018-10-10
    • vue2.0 使用element-ui里的upload组件实现?#35745;?#39044;览效果方法

      vue2.0 使用element-ui里的upload组件实现?#35745;?#39044;览效果方法

      今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现?#35745;?#39044;览效果方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来?#32431;?#21543;
      2018-09-09
    • vue2导航根据路由传值,而改变导航内容的实例

      vue2导航根据路由传值,而改变导航内容的实例

      下面小编就为大家带来一篇vue2导航根据路由传值,而改变导航内容的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来?#32431;?#21543;
      2017-11-11
    • 在vue中读取本地Json文件的方法

      在vue中读取本地Json文件的方法

      今天小编就为大家分享一篇在vue中读取本地Json文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来?#32431;?#21543;
      2018-09-09

    最新评论

    山东群英会开奖查询