摘要：关于微信小程序中评论框的功能，其实是有很多坑和可以优化的地方的。今天要介绍的这个功能，在实现过程中，曾经我也踩过的坑。恰好昨天又有好友提及这个需求，索引再记录一篇。日后遇到此类问题，可快速爬坑。

一、起因

昨天上午，上回说到的那个小姐姐又在微信上问我问题。如图：微信好友咨询微信小程序中评论时页面滚动到指定位置一事.png
恰好这个问题在公司中也有过应用，索性抽几小时再来篇随笔记录一下。

二、草图叙说两种情况

由于某些原因，公司的微信小程序暂时无法访问。艺灵只好先画张草图，让看官们近一步了解问题。如图：草图对比评论前后界面的变化.png

也不知道艺灵画的草图，看官们能否看懂，还是再来点文字详细描述下吧。一共是两种状态：
用户评论时：当用户想要评论时，输入框获取了焦点，软键盘弹起。评论列表的最后一条评论应该出现在评论框的上方；
用户发表评论后：此时页面应该滚动到最新评论位置。

三、踩过的坑

尽管scroll-view和wx.pageScrollTo都能实现需求，但属性使用不当也是很坑的哦！~~

3.1、错用scroll-view组件中的scroll-top

为了提升用户体验，评论列表这一块儿我们团队使用了微信原生的scroll-view组件，戳我访问scroll-view 官方文档。由于scroll-view组件中有scroll-top属性，所以我们采用就近原则，通过改变scroll-top这个来实现评论前后的位置。想法是美好的，但无奈各种需求与场景的影响，最终放弃此方案。

3.2、错用wx.pageScrollTo中的scrollTop

后来我们团队又改用wx.pageScrollTo这个API中的scrollTop，戳我访问wx.pageScrollTo 官方文档。但是由于公司项目场景复杂，封装的评论框可以任意模块嵌套使用。最终导致的问题是：在某些场景下，定位正常，在某些场景下，定位失败。最终我们也放弃了通过计算scrollTop来定位的方案。

3.3、正确方式一：scroll-view + scroll-into-view

详情见下一篇笔记。

3.4、正确方式二：wx.pageScrollTo + selector

由于selector是选择器，所以我们在用户点击评论框后，动态修改selector即可实现页面滚动到指定位置的功能。

看官千万不要以为艺灵说了正确方式后，就可以高枕无忧了。事实上，wxss及页面布局也有可能影响最终的效果哦~~

接下来还是跟以往的文章一样，进入代码阶段。下面的代码基于文章微信小程序从入坑到放弃二十二：完美兼容安卓和ios手机的底部评论框，在此基础上新增了少量代码来实现评论定位的功能。

四、手写代码

4.1、目录结构

    
components /* 组件目录 */
    
  wx-pageScrollTo /* 组件目录（代码未做任何修改） */
    
    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">
    
  <view 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">此标签在此demo中用于定位和撑起页面高度，看官可根据实际情况进行调整。</view>
    
  </view>
    
  <!-- 固定在底部的输入框 start -->
    
  <view class="page-footer">
    
    <view class="commentContent" bindtap="handleIsShowComment">
    
      <view>写评论...</view>
    
    </view>
    
  </view>
    
  <!-- 弹层评论框 start -->
    
  <wxPageScrollTo info="\{\{popupEvaluation\}\}" bind:myeventEvaluationData="myeventEvaluationData"></wxPageScrollTo>
    
  <!-- 弹层评论框 end -->
    
  <!-- 固定在底部的输入框 end -->
    
</view>
    

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

4.3、js源码

    
Page({
    
  data: {
    
    ... /* 未做修改 */
    
  },
    
  onLoad: function () {
    
    this.initData() /* 新增：未对接接口时，初始化一堆数据便于视图观察 */
    
  },
    
  /* 评论数据 */
    
  myeventEvaluationData(event) {
    
    ... /* 未做修改 */
    
    if (typeName) { // 点击了发布评论按钮
    
      ... /* 未做修改 */
    
      setTimeout(() => {
    
        let editEvaluationData = this.data.evaluationData
    
        const data = { name: '最新评论' + (this.data.evaluationData.length + 1), text: content, type: typeName, time: Date.now() }
    
        editEvaluationData.splice(0, 0, data)
    
        this.setData({
    
          ..., /* 未做修改 */
    
          evaluationData: editEvaluationData
    
        })
    
        this.pageScrollFirst() /* 新增：滚动到最新评论处 */
    
        ... /* 未做修改 */
    
      }, 1000)
    
    } else {
    
      ... /* 未做修改 */
    
    }
    
  },
    
  /* 点击时显示评论组件 */
    
  handleIsShowComment() {
    
    this.pageScrollBottom() /* 新增：滑动到底部 */
    
    this.setData({
    
      ... /* 未做修改 */
    
    })
    
  },
    
  /* 新增：滚动到页尾 */
    
  pageScrollBottom() {
    
    wx.pageScrollTo({
    
      selector: '.evaluation-end'
    
    })
    
  },
    
  /* 新增：滚动到最新评论（第一条）的位置 */
    
  pageScrollFirst() {
    
    wx.pageScrollTo({
    
      selector: '.evaluation-wrap'
    
    })
    
  },
    
  /* 新增：初始化一堆假数据 */
    
  initData() {
    
    let data = []
    
    for (let i = 0; i < 20; i++) {
    
      data.push({ name: '佚名' + (Number(i) + 1), text: '第' + (Number(i) + 1) + '条评论', type: '资讯', time: Date.now() })
    
    }
    
    this.setData({
    
      evaluationData: data
    
    })
    
  }
    
})
    

js代码比较多且有一部分是未做修改的，所以上面就省略了。上面只展示有变动的地方，想看完整源码及注释的看文章末尾提供的分支地址。

wxss的代码也有新增，此处不再展示，源码见文章末尾。

4.4、最终效果

现在，我们来体验下效果。视频如下：兼容苹果手机的评论框模拟发表评论.mp4（友情提示：点击上面的图片即可播放视频）

可以看到，现在已经实现了文章开头提到的需求。由于不同的项目需求不一样，看官可以根据此代码进行改造，没必要自己重复造轮子。毕竟评论框被遮挡的坑，艺灵已经帮你填完了。

最后，特别说明：如果看官拉完代码在本地有效果，但改造项目后发现没有效果，请检查你的wxss及页面布局。

五、demo源码

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

    
源码分支： dev-wx-pageScrollTo-20200609  
    

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

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

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