uni-app 之 聊天室页面滚动到底部

uni-app 之 聊天室滚到最底部

  请注意 !:  知识点为uni-app 与 vue 结合

  这次写到聊天室,碰到一个emmmmm问题比较严重的事情,聊天嘛,咱们想实现的就无非是微信,QQ那种聊天的效果嘛,我们研究了,,,,emmmm  (n久之长),终于是把这个功能写出来了,代码等什么时候整理出来给大家看,今天主要说一下碰到的一个问题,就是我发送消息的时候, 想要将消息弹出,发一条弹一条,代码附上

  注意:scroll-view要设置高度

  输入内容后,必然要在对话界面的底部显示内容,可以通过uni.pageScrollTo的方式,但是这个页面刷新的太厉害,输入框都刷新了,没法使用。所以只能使用scroll-view组件。但是通过scroll-view使用竖向滚动时,需要给 一个固定高度。为了适配屏幕的大小,则需要通过计算来确定scroll-view的高度。

<view class="content" id="content" :style="{height: style.contentViewHeight + ‘px‘}">
            <scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: style.contentViewHeight + ‘px‘}" :scroll-with-animation="true" :scroll-top="scrollTop">
                <!-- <view class="chat-window"> -->
                    <view class="small-talk_time">12:18</view>
                    <!-- 聊天内容 -->
                    <view class="content-all">
                        <!-- 聊天窗口 -->
                        <view :class="item.type" v-for="(item, index) in chatRecord" :key="index" class="m-item">
                            <!-- 收信人 -->
                            <view class="talk-text talk-left" v-if="item.type == ‘talk-left‘">
                                <!-- 收信人头像 -->
                                <view class="talk-photo">
                                    <image src="../../static/images/myself.jpg" class="talk-img"></image>
                                </view>
                                <!-- 收信人消息 -->
                                <view class="talk-content">
                                    <view class="talk-huge"></view>
                                    <view class="talk-title">{{item.message}}</view>
                                </view>
                            </view>
                            <view class="talk-text talk-right" v-if="item.type == ‘talk-right‘">
                                <!-- 发信人消息 -->
                                <view class="talk-content">
                                    <view class="talk-title">{{item.message}}</view>
                                    <view class="talk-huge"></view>
                                </view>
                                <!-- 发信人头像 -->
                                <view class="talk-photo">
                                    <image src="../../static/images/myself.jpg" class="talk-img"></image>
                                </view>
                            </view>
                        </view>
                    </view>
                <!-- </view> -->
            </scroll-view>
        </view>

既然是聊天 先将聊天页面写出来 写好了你说我说的样式  大概就是这个样子

接下来是咱们的js了


 created () {
   const res = uni.getSystemInfoSync();   //获取手机可使用窗口高度     api为获取系统信息同步接口
   this.style.pageHeight = res.windowHeight;
   this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100) - 70; //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
   this.scrollToBottom();   //创建后调用回到底部方法
 },     

export default {  data (){     // 聊天页面时时滚动样式
        style: {
            pageHeight: 0,
            contentViewHeight: 0,
            footViewHeight: 90,
            mitemHeight: 0
        },  }}

js代码:

   /**
         * @author gongliying
         * @date 2019-07-26
         * @information 跳转页面底部
         */
        scrollToBottom: function () {
            let that = this;
            let query = uni.createSelectorQuery();
            query.selectAll(‘.m-item‘).boundingClientRect();
            query.select(‘#scrollview‘).boundingClientRect();
            query.exec((res) => {
                that.style.mitemHeight = 0;
                res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40)   //获取所有内部子元素的高度
                if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) {   //判断子元素高度是否大于显示高度
                    that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight    //用子元素的高度减去显示的高度就获益获得序言滚动的高度
                }
       })
        }

  这一步做的主要就是获取这个‘.m-item’这个里面的节点信息   uni-app虽然不支持window和document 但是咱们还是有一个api可以获取他元素的信息的 就算是uni.createSelectorQuery()这个api,他会返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。这个exec()他会执行这里面所有的请求,我们最后会获取到他的id dataset 左边界坐标  右边界坐标 上边界坐标 下边界左边 节点的宽度  节点的高度   具体的这个方法的使用可以去官网查看一番,我就不具体解释了  毕竟今天重点不是他呀    回到 原题   咱们说了   在最开始created的时候获取你当前使用手机的品牌啊  型号啊   我们这里主要的是获取可使用窗口的高度     然后我们又获取了所有子元素的告诉   然后就可以看着我的注释走了~~~~

  但是呢。你们不要以为这样就好了  , 还有一个很重要的事情,如果你们认真看了这段代码还有就是实验了一下, 你们会发现到最后那个滚动条没有滚动到最底部,会发现最后一调消息被隐藏了,也不是没有 ,页面上有这条消息,但是呢就是没有弹出来,后来呢,

仔细分析了一下,因为由于vue采用虚拟dom,我每次生成新的消息时获取到的div的scrollHeight的值是生成新消息之前的值,所以造成每次都是最新的那条消息被隐藏掉了!这就是开头我跟大家说注意这是uni-app和vue结合的原因了

  解决方法:采用异步处理settimeout函数获取最新的scrollheight  让他先全部执行完了之后去走这个异步,这样就能确保滚动条每次滚到的都是最底部  上段代码更改如下:

  

/**
         * @author gongliying
         * @date 2019-07-26
         * @information 跳转页面底部
         */
        scrollToBottom: function () {
            let that = this;
            let query = uni.createSelectorQuery();
            query.selectAll(‘.m-item‘).boundingClientRect();
            query.select(‘#scrollview‘).boundingClientRect();
            query.exec((res) => {
                that.style.mitemHeight = 0;
                res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40)   //获取所有内部子元素的高度

           // 因为vue的虚拟DOM 每次生成的新消息都是之前的,所以采用异步setTimeout    主要就是添加了这红字
           setTimeout(() => {

                  if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) {   //判断子元素高度是否大于显示高度
                      that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight    //用子元素的高度减去显示的高度就获益获得序言滚动的高度
                  }         }, 100)
       })
        }

最后实现了每次聊天都是滚到最底部  要是想要进入页面就滚到最底部呢  我们是在socket链接读取文件的时候调用了这个方法

ending~~~~

原文地址:https://www.cnblogs.com/gongliying/p/11258189.html

时间: 2024-10-01 07:51:26

uni-app 之 聊天室页面滚动到底部的相关文章

js-让页面滚动最底部,显示到最底部

应用场景,聊天webapp中,让页面初始化的时候或者页面更新的时候,都让页面显示在最底部的聊天内容 可以借助react中的两个生命周期函数 componentDidMount和componentDidUpdate componentDidMount() { // 初始显示列表, 让页面滚动到底部scrollTo(x轴0, Y轴为内容滚动的高度) window.scrollTo(0, document.body.scrollHeight) } componentDidUpdate () { //

jQuery判断页面滚动到底部

有时候我们需要页面滚动到底部的时候去加载更多的数据,实现思路基本上就是判断浏览器页面是否滚动到了页面底部,当滚动到页面底部的时候,用AJAX异步获取数据然后加载到页面中. 利用jQuery判断浏览器页面是否滑动到了底部: <script type="text/javascript"> // scroll event $(window).scroll(function(){ // scroll at bottom if ($(window).scrollTop() + $(w

页面滚动到底部自动加载下一页功能的实现

页面滚动到底部自动加载下一页功能的实现,效果见本博首页 1.endlesspage.js文件内容 var gPageSize = 10; var i = 1; //设置当前页数,全局变量 var finished = false; var dataUrl = ''; $(function () { //根据页数读取数据 function getData(pagenumber) { //console.log(i); $.get(dataUrl, { pagesize: gPageSize, p:

检测页面滚动到底部

原理是: 滚动高度 + 页面高度 = 页面滚动总高度 代码如下: //文档的总高度 function getScrollHeight(){ var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0; if(document.body){ bodyScrollHeight = document.body.scrollHeight; } if(document.documentElement){ documentScro

手机页面滚动到底部刷新数据

1 //滚动到底部加载数据 2 $(window).scroll(function () { 3 var scrollTop = $(this).scrollTop(); 4 var elementHeight = $(this).height(); 5 var h1 = scrollTop + elementHeight; 6 var scrollHeight = document.documentElement.scrollHeight; //var documentHeight = $(d

jquery使页面滚动到底部

function scrollToEnd(){//滚动到底部 var h = $(document).height()-$(window).height(); $(document).scrollTop(h); } (摘抄自http://www.cnblogs.com/hui-blog/p/5526278.html)

jquery让页面滚动到底部

function scrollToEnd(){//滚动到底部 var h = $(document).height()-$(window).height(); $(document).scrollTop(h); }

页面滚动到底部自动 Ajax 获取文章

 代码如下 复制代码 var _timer = {};function delay_till_last(id, fn, wait) {    if (_timer[id]) {        window.clearTimeout(_timer[id]);        delete _timer[id];    }     return _timer[id] = window.setTimeout(function() {        fn();        delete _timer[i

JS监听页面滚动到底部事件

废话不说,直接上代码,放心我这个是最好的,直接放到js脚本里,直接生效: $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollTop + windowHeight == scrollHeight){ clickMore(); } });