前言 在微信小程序中，我们经常会使用到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部分 定义两个变量 [代码]data: { bodyText:'', // 展示的文本内容 scrollTop:0 // 竖向滚动条的位置 } [代码] 定义一个方法，设置滚动条定位到底部 [代码] 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 => {}) }, [代码] 定义一个方法，模拟动态生成文本内容 [代码]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) }, [代码] 最后点击按钮，调用createBodyText()方法，模拟动态生成文本即可实现效果 总结 实现此功能的关键属性就是scroll-top，该属性可以控制滚动条的位置，每一次文本变化时，重新计算一下到底部的scroll-top值即可。 代码片段 代码片段 实际体验 小程序：工作总结生成工具 [图片]