uniapp开发聊天让底部出现最新消息

在网上找了一堆方法this.$nextTick(()=>{ this.$refs.chatWindow.scrollTop = this.$refs.chatWindow.scrollHeight; }）这个不支持。还有一种是scroll-view 配合uni.createSelectorQuery() 以及boundingClientRect() 方法实现，此方法要获取设备窗口宽高我的也不支持。

                                             ---------急性子直接从这开始读-------------

走路好多好久弯路得到的重点 ：

     其实好多答案就在我们眼前我却没有及时发现： 微信开发官方文档中scroll-view组件有这样一个属性 scroll-into-view 。

答案 ：  那么scroll-view如何定位在最底部？

                                          ---------超鸡急性子直接从这开始读-------------

scroll-view组件添加一个scroll-into-view属性，按照官方文档的说法它的值应为某子元素id。设置哪个方向可滚动，则在哪个方向滚动到该元素，也就是说可以动态的修改这个属性的值，从而让scroll-view组件的滚动到想要滚动的页面元素位置。

请开始复杂操作：

1.视图层

//第一步 :scroll-into-view="scrollToView" 
 
<scroll-view :scroll-into-view="scrollToView" id="scrollview" scroll-y="true"
          style="height: 100%;">

//第二步 :id="'msg' + item.key"


          <div v-for="item in list" :key="item" :class="item.id == '2' ? 'atalk' : 'btalk'"
            class="m-item"  :id="'msg' + item.key" >

            <div v-if="item.id == 1" class="useImageList">
              <span class="usespanList">{{ item.content }}</span>
              <image class="useImage" mode="widthFix" src="" alt=""></image>
            </div>
            <div v-if="item.id == 2">
              <image class="kfImage" mode="widthFix" src="" alt=""></image>
              <span>{{ item.content }}</span>
            </div>

          </div>
        </scroll-view>

2.数据层

3 .在发送消息的时候修改scrollToView:  一定要带奶丝t忒可 。完成 祝大家昨天元宵节快乐。 作者是00年的在陕西需要一个《女朋友》
 

   this.$nextTick(() => {
      this.scrollToView = 'msg' + this.list[this.list.length - 1].key
      })