摘要：上周我们使用view + wx.pageScrollTo实现了在评论前后，页面滚动到指定评论位置的需求。除此之外，利用scroll-view组件也可以实现，但是步骤变多了。因为我们要计算出scroll-view的最佳高度......

一、同样的功能，不同的解法

继上周的文章《微信小程序从入坑到放弃三十：wx.pageScrollTo在评论功能中的应用》，当时我们使用view + wx.pageScrollTo实现了在评论前后，页面滚动到指定评论位置的需求。接下来的这篇将介绍另外一种方法，即：使用scroll-view组件实现同样的效果。

二、原理

在微信小程序官方文档中有一个叫scroll-view的组件，该组件的作用就是：实现视图区域的滚动。水平方向和垂直方向都能满足，详情戳我访问scroll-view 官方文档。

既然微信官方都已经提供了功能，那是不是就可以愉快的开发呢？

显然事情并没有这么简单！

三、防踩坑指南

3.1、竖向滚动时必须设置具体高度

3.2、计算scroll-top的值的方法不可靠，具体看页面布局及动态模块而定

3.3、正确的方式是：动态控制scroll-into-view的值即可

以上防踩坑指南中最重要的还是第1条，设置具体高度，这个是微信官方的强制性要求。主要牵扯到两个方面：
1、页面布局能力；
2、对wx.createSelectorQuery这个API的了解情况，也就是获取DOM元素的相关操作。

重点已经说完了，下面开始枯燥的代码阶段。文章篇幅有限，只写一些核心代码，完整代码见文章末尾提供的github仓库。

四、手写代码

4.1、目录结构

     
components /* 组件目录 */
     
  textarea-fixed-bottom /* 之前封装好的评论框组件，js内容有修改 */
     
    index.js /* js文件，交互及逻辑都在这里（可以当成.js来理解） */
     
    index.json /* json文件，可配置标题、引用组件等 */
     
    index.wxml /* wxml模板文件，前台展示（可以当成.html来理解） */
     
    index.wxss /* wxss样式文件（可以当成.css来理解） */
     
pages /* pages目录 */
     
  index /* 首页目录（此目录下文件有修改） */
     
    index.js /* js文件 */
     
    index.json /* json文件 */
     
    index.wxml /* wxml模板文件 */
     
    index.wxss /* wxss样式文件 */
     
...... /* 其他默认文件略 */
     

4.2、wxml源码

     
<view class="page">
     
  <scroll-view scroll-y style="height:\{\{scrollViewHeight\}\}" scroll-into-view="\{\{scrollIntoView\}\}" class="page-content" >
     
    <view class="page-module">页面正常内容区，此处仅用来占位</view>
     
    <!-- 评论列表 start -->
     
    <view class="evaluation-wrap" id="evaluation-wrap">
     
      <view class="evaluation__item" wx:for="\{\{evaluationData\}\}" wx:key="index">
     
        <view class="evaluation__avatar"></view>
     
        <view class="evaluation__content">
     
          <view class="evaluation__name">\{\{item.name\}\}
     
            <view class="evaluation__time">\{\{item.time\}\}</view>
     
          </view>
     
          <view class="evaluation__text">\{\{item.text\}\}</view>
     
        </view>
     
      </view>
     
    </view>
     
    <!-- 评论列表 end -->
     
    <view class="evaluation-end" id="evaluation-end"  style="height:\{\{paddingHeight\}\}px">此标签在此demo中仅用于定位和撑起页面高度，看官可根据实际情况进行调整。</view>
     
  </scroll-view>
     
  <!-- 固定在底部的输入框 start -->
     
  <view class="page-footer">
     
    <view class="commentContent" bindtap="handleIsShowComment">
     
      <view>写评论...</view>
     
    </view>
     
  </view>
     
  <!-- 弹层评论框 start -->
     
  <textareaFixedBottom info="\{\{popupEvaluation\}\}" bind:myeventEvaluationData="myeventEvaluationData"></textareaFixedBottom>
     
  <!-- 弹层评论框 end -->
     
  <!-- 固定在底部的输入框 end -->
     
</view>
     

友情提示：上面代码中的\反斜线是为了防止在文章中转码，看官复制后替换为空即可。

黄色高亮的是重点，为本次新增的代码。一共新增了3个变量，分别是：
scrollViewHeight：scroll-view组件的高度。即：页面高度 - 底部输入框的高度；
scrollIntoView：动态修改的节点名；
paddingHeight：软键盘弹起时，页面应填充的高度。即：软键盘高度 + 输入框组件高度 / 2 ；
最后再补充下，软键盘的高度和输入框组件的高度从组件内可获取，然后通过this.triggerEvent('事件名','参数')的形式传给父组件。

js和wxss代码就不展示了，源码见文章末尾。

4.3、最终效果

现在，我们来体验下在苹果手机上的效果吧。视频如下：scroll-view组件实现评论前后页面滚动到指定评论处的功能.mp4（友情提示：点击上面的图片即可播放视频）

完美~

五、demo源码

demo源码已上传到了github上，如果看官需要研究源码，可以点击下面的链接进行访问并下载。

     
源码分支： dev-scroll-view-scrollIntoView-20200618 
     

源码中会有必要注释和本篇文章中的示例。若有疑问可与艺灵联系，方式见下方二维码或右侧。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2020-06-18/weixin-scroll-into-view.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。