微信小程序 解决 当套在scroll-view中后 wx.pageScrollTo 函数失效问题解决

pageScrollTo 只是 页面的API 他对 scroll-view 的滚动是无法控制的
但是 scroll-view 也提供了一个scroll-into-view属性
我们编写一个小案例
wxml 参考代码如下

<view>
    <scroll-view scroll-y="{{ true }}" style="height: 100vh;" scroll-into-view="{{scrollIntoView}}">
        <button bindtap="handleTap">回到指定位置button>
        <view class = "ControlHeight">view>
        <view id = "pinglun">指定位置view>
        <view class = "supportingBoundary">view>
        <button bindtap="handleTap">回到指定位置button>
    scroll-view>
view>
1
2
3
4
5
6
7
8
9

wxss 参考代码如下

/* component/indexText.wxss */
.ControlHeight{
    width: 100vh;
    background-color: aqua;
    height: 100vh;
}
#pinglun{
    width: 100vw;
    text-align: center;
    color:black;
    font-size: 24rpx;
    height: 30rpx;
    line-height: 30rpx;
}
.supportingBoundary{
    width: 100vh;
    background-color:brown;
    height: 100vh;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

js 参考代码如下

Page({
  data: {
    scrollIntoView: ""
  },
  onLoad() {
    
  },
  handleTap: function(e) {
    this.setData({
      scrollIntoView: 'pinglun'
    });
  }
 
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

关键在于scroll-into-view 指定滚动id位置
然后 我们可以运行代码 你会发现 点击后 他会滚动到指定位置

而且 触发后 也不会影响继续滚动 继续滚动后再次点击 依旧会滚动到指定位置 还是非常好用的