微信小程序从入坑到废弃三十：wx.pageScrollTo在评论功能中的应用
作者：以岭设计-来源：-发布时间：2020-06-09 21:07:03-阅读：-评论:0-积分:0
摘要：关于陌陌小程序中评论框的功能，其实还有很多坑和可以优化的地方。 今天要介绍的功能，在实现的过程中，我曾经踩过坑。 正好今天又有朋友提到了这个需求，索引会再记录一篇。 如果以后遇到这种问题html评论框，可以快速爬坑。
1. 原因
昨天早上，上次提到的小姐姐又问了我关于沫沫的问题。 如图：微信好友咨询陌陌小程序中的评论时页面滚动到指定位置.png
正好这个问题在公司也有应用，所以干脆花了几个小时记录成一篇论文。
2.草图讲述了两种情况
由于个人原因，公司陌陌小程序暂时无法使用。 一岭只好先画了一张草图，以便评委们能更好地了解问题。 如图：sketches.png对比前后界面的变化
一岭画的草图我不认识，但是评委们都能看懂，所以详细描述一下吧。 总共有两种状态：
用户评论时：当用户想要评论时，输入框获得焦点，弹出软键盘。 评论列表中的最后一条评论应出现在评论框上方；
用户发表评论后：此时页面应滚动到最新评论。
三、踩坑
虽然scroll-view和wx.pageScrollTo都可以满足要求，但是属性使用不当也是很棘手的！ ~~
3.1. 滚动视图组件中滚动顶部的错误使用
为了提高用户体验，我们团队在评论列表中使用了Momo原创的滚动视图组件。 点我查看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 + 选择器
既然选择器是选择器，那么我们可以在用户点击评论框后动态改变选择器，实现页面滚动到指定位置的功能。
判官千万别以为以岭说出正确的方法后html评论框，就可以高枕无忧了。 其实wxss和页面布局也可能会影响最终的疗效~~
下一步就是像之前的文章一样进入代码阶段。 以下代码基于《陌陌小程序从入坑到放弃22：完美兼容Android、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源码
- 页面正常内容区，此处仅用来占位
- {{item.name}}
- {{item.time}}
- {{item.text}}
- 此标签在此demo中用于定位和撑起页面高度，看官可根据实际情况进行调整。
- 写评论...
友情提示：上面代码中的反斜杠是为了避免文章中转码，直接复制替换为空即可。
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
（友情提示：点击里面的图片即可播放视频）
可以看到文章开头提到的需求已经实现了。 由于不同项目的需求不同，法官可以根据这个代码进行改造，不需要自己重新发明轮子。 毕竟评论框被盖住的坑，一菱已经填好了。
最后特别说明：如果inspector拉取代码在本地可以运行，但是重建项目后发现没有效果，请检查一下你的wxss和页面布局。
五、demo源码
demo源码已上传至github。 如果您需要研究源代码，可以点击下面的链接访问并下载。
源代码将在本文中包含必要的注释和示例。 如果您有任何疑问，请联系以岭，联系方式见下方或右侧二维码。
转载声明：
如果您想转载本文至其他平台，请不要保留本文出处！
本文链接：/xwzj/2020-06-09/weixin-wx-pageScrollTo.html
如果您不想直接保留地址，可以隐式保留。 以岭不希望看到有人把我的技术文章带到他的网站或其他平台上进行教学（安装）过程（B）而不留下我的痕迹。 您可以随意转载、更改文章，但请尊重以岭的劳动成果！ 谢谢你的理解。
亲爱的，扫描二维码支持一岭吧~
标签：微信小程序小程序教程wx.pageScrollToscroll-viewscroll-into-viewtextareaButtons遮挡评论框
上一篇：微信小程序从入门到放弃二十九：一个小场景了解bindtap和catchtap的区别下一篇：微信小程序从入门到放弃三十一：评论功能中Application中的scroll-view组件
