前言

在微信小程序中，我们经常会使用到scroll-view容器去展示动态生成的文本，当生成文本超出范围后，scroll-view一直停留在顶部，看起来没有任何反应，给人一种页面失去响应的感觉。今天就通过一种取巧的方式，让scroll-view根据生成的内容，实时定位到底部，来解决以上的问题。

具体实现

wxml部分

定义一个<scroll-view></scroll-view>组件，属性带上scroll-y和scroll-top，
scroll-top由变量动态设置

scroll-y：允许纵向滚动
scroll-top：设置竖向滚动条位置

<scroll-view class="scroll-text" scroll-y scroll-top="{{scrollTop}}">
    <text>
        {{bodyText}}
    </text>
 </scroll-view>
</view>

wxss部分

给scroll-view设置一个固定高度的范围

.scroll-text {
    margin-top: 32rpx;
    max-height: 30vh;
    color: #333;
    background-color: darkgray;
}

js部分

1. 定义两个变量

data: {
    bodyText:'', // 展示的文本内容
    scrollTop:0  // 竖向滚动条的位置
}

2. 定义一个方法，设置滚动条定位到底部

  autoScroll() {
    let that = this
    let query = wx.createSelectorQuery()
    // 通过class选择器定位到scorll-view
    query.select('.scroll-text').boundingClientRect(res => {
        that.setData({
            // 由于res.height效果不明显，所以乘以100系数，这个系数可以根据实际效果调整
            scrollTop: res.height * 100
        })
    })
    query.exec(res => {})
  },

3. 定义一个方法，模拟动态生成文本内容

createBodyText(){
    let that = this
    let text = ''
    let count = 0
    // 循环拼接文本
    let intervalId = setInterval(function(){
        text += count+'烫烫烫烫烫烫烫烫烫烫'
        that.setData({
            bodyText:text
        })
        // 每次文本变更时调用，重定位到底部
        that.autoScroll()
        // 50次后结束
        if(count++ >= 50){
            clearInterval(intervalId)
        }
    },100)
  },

4. 最后点击按钮，调用createBodyText()方法，模拟动态生成文本即可实现效果

总结

实现此功能的关键属性就是scroll-top，该属性可以控制滚动条的位置，每一次文本变化时，重新计算一下到底部的scroll-top值即可。

代码片段

代码片段

实际体验

小程序：工作总结生成工具