仿聊天功能,发送一条信息,页面自动滚动到底部,这里有两种方法

scroll-view的scroll-into-view和scroll-top两个属性

首先说scroll-into-view属性

scroll-into-view解释:

  • 值应为某子元素id

  • id不能以数字开头

  • 设置的哪个方向滚动,就滚动到对应id元素、

所以这个属性的用法就是每次发送完消息后,给这条消息设置id,然后滚动到对应id位置

<scroll-view scroll-y  :style="{height:(useHeight - 100) + 'px'}"  :scroll-into-view="scrollView" scroll-with-animation @scroll="scroll">
       //循环聊天内容内容内容        
  </scroll-view>
        //input确定事件
        confirm(e){
                this.myinfo.push({id:this.myinfo.length+1,desc:this.keyword,type:1})
                this.keyword = ''
                //每次发送消息后重新赋值id
                this.scrollView = 's-' + (this.myinfo.length+1)
        },

第二种是scroll-top属性

scroll-top解释:设置竖向滚动条位置

跟scroll-into-view差不多,都是定位到最后一条的位置,发送完消息后,设置滚动条到底部

<scroll-view scroll-y  :style="{height:(useHeight - 100) + 'px'}" :scroll-top="scrollTop"  scroll-with-animation @scroll="scroll">
    //循环消息内容
 </scroll-view>
            //input确定事件
            confirm(e){
                this.myinfo.push({id:this.myinfo.length+1,desc:this.keyword,type:1})
                //设置滚动条到底部
                this.scrollTop = 1000 * this.myinfo.length //这里乘1000不是固定的,乘1000是肯定到底部了
                this.keyword = ''
            },

:scroll-view要有明确的高度

scroll-into-view的id不能重复

scroll-into-view在小程序有时不生效

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐