微信小程序 通过 pageScrollTo 滚动到界面指定位置

我们可以先创建一个page 注意 一定要在page中使用 因为pageScrollTo控制的是页面滚动 你在组件里用 他就失效了

我们先来看一个案例
wxml 代码如下

<view>
    <button bindtap="handleTap">回到指定位置button>
    <view class = "ControlHeight">view>
    <view id = "pinglun">指定位置view>
    <view class = "supportingBoundary">view>
    <button bindtap="handleTap">回到指定位置button>
view>
1
2
3
4
5
6
7

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: {
 
  },
  onLoad() {
    
  },
  handleTap: function(e) {
    wx.pageScrollTo({
        selector: '#pinglun',
    });
  }
 
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

关键就在于 我们在页面上写了一个 id为pinglun的元素
然后 调用pageScrollTo 指定选择id为pinglun的元素 当然 id的名字大家可以随便取
这样 你就会发现 无论在页面任何位置 点击 触发handleTap
界面都会里面滚动到pinglun所在的位置