uniapp聊天室功能（scroll-view的使用）

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

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在小程序有时不生效