WeChat applet scrolls to the specified position on the interface through pageScrollTo

We can create a page first. Note that it must be used in the page because pageScrollTo controls page scrolling. If you use it in a component, it will be invalid.

Let’s first look at a case
wxml code as follows

<view>
    <button bindtap="handleTap">回到指定位置</button>
    <view class = "ControlHeight"></view>
    <view id = "pinglun">指定位置</view>
    <view class = "supportingBoundary"></view>
    <button bindtap="handleTap">回到指定位置</button>
</view>

The wxss code is as follows

/* 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;
}

js reference code is as follows


Page({
    
    
  data: {
    
    
 
  },
  onLoad() {
    
    
    
  },
  handleTap: function(e) {
    
    
    wx.pageScrollTo({
    
    
        selector: '#pinglun',
    });
  }
 
})

The key is that we write an element with the ID of pinglun on the page
and then call pageScrollTo to specify and select the element with the ID of pinglun. Of course, you can choose the name of the ID at will. In this way, you will
find that no matter where you click on the page to trigger the handleTap
interface, it will scroll inside. Go to pinglun's location
Insert image description here

Guess you like

Origin blog.csdn.net/weixin_45966674/article/details/132846483