微信小程序scroll-view滑动的时候滑动到指定位置

效果实现

1.滑动的时候调动滑动事件bindscroll="scroll"

1.  
   <view style="position: fixed;z-index: 100;" wx:if="{{content.isShow}}">
2.  
   我要在头部定义的标题栏
3.  
   </view>
4.  
    
5.  
   <scroll-view scroll-y="true" bindscroll="scroll" scroll-with-animation scroll-top="{{scrolltop}}">
6.  
   <view>这里面是你的一大堆内容</view>
7.  
   </scroll-view>

scroll-with-animation 过渡动画

scroll-top="{{scrolltop}}" 距离顶部多少高度

2.在调用scroll里面的事件函数

1.  
   data: {
2.  
   content: {
3.  
   isShow: false
4.  
   },
5.  
   scrolltop:0,
6.  
   }

这里使用的是获取手机屏幕大小的宽度res.screenWidth来自适应头部悬浮的位置的显示与隐藏

opacity:( 1 - e.detail.scrollTop / 100 / 3).toFixed(2) 目的是为了页面上划或者下划的时候实现渐显渐隐效果，但是页面调用的时候卡动，所以就直接去除掉了这个效果.

1.  
   scroll: function(e:any) {
2.  
   const res = wx.getSystemInfoSync()
3.  
   if(res.screenWidth <= 330){
4.  
   if (e.detail.scrollTop >= 300) {
5.  
   if (!this.data.content.isShow) {
6.  
   this.setData({
7.  
   'content.isShow': true
8.  
   })
9.  
   }
10.  
    } else {
11.  
    if(e.detail.deltaY < 0){
12.  
    // console.log("向下滑动")
13.  
    // opacity:( 1 - e.detail.scrollTop / 100 / 3).toFixed(2)
14.  
    this.setData({scrolltop:300})
15.  
    }else{
16.  
    // console.log("向上滑动")
17.  
    this.setData({scrolltop:0})
18.  
    }
19.  
    if (this.data.content.isShow) {
20.  
    this.setData({
21.  
    'content.isShow': false
22.  
    })
23.  
    }
24.  
    }
25.  
    }else if(res.screenWidth > 330 && res.screenWidth <= 365){
26.  
    if (e.detail.scrollTop >= 330) {
27.  
    if (!this.data.content.isShow) {
28.  
    this.setData({
29.  
    'content.isShow': true
30.  
    })
31.  
    }
32.  
    } else {
33.  
    if(e.detail.deltaY < 0){
34.  
    this.setData({scrolltop:330})
35.  
    }else{
36.  
    this.setData({scrolltop:0})
37.  
    }
38.  
    if (this.data.content.isShow) {
39.  
    this.setData({
40.  
    'content.isShow': false
41.  
    })
42.  
    }
43.  
    }
44.  
    }else if(res.screenWidth > 365 && res.screenWidth <= 420){
45.  
    if (e.detail.scrollTop >= 377) {
46.  
    if (!this.data.content.isShow) {
47.  
    this.setData({
48.  
    'content.isShow': true
49.  
    })
50.  
    }
51.  
    } else {
52.  
    if(e.detail.deltaY < 0){
53.  
    this.setData({scrolltop:377})
54.  
    }else{
55.  
    this.setData({scrolltop:0})
56.  
    }
57.  
    if (this.data.content.isShow) {
58.  
    this.setData({
59.  
    'content.isShow': false
60.  
    })
61.  
    }
62.  
    }
63.  
    }else{
64.  
    if (e.detail.scrollTop >= 395) {
65.  
    if (!this.data.content.isShow) {
66.  
    this.setData({
67.  
    'content.isShow': true
68.  
    })
69.  
    }
70.  
    } else {
71.  
    if(e.detail.deltaY < 0){
72.  
    this.setData({scrolltop:395})
73.  
    }else{
74.  
    this.setData({scrolltop:0})
75.  
    }
76.  
    if (this.data.content.isShow) {
77.  
    this.setData({
78.  
    'content.isShow': false
79.  
    })
80.  
    }
81.  
    }
82.  
    }
83.  
    },