程序实现回到顶部的两种可行方式详细介绍

why 3155 2024-07-03

小程序回到顶部有哪两种方式

小程序回到顶部有两种方式,分别是:

一、使用view形式的回到顶部

HTML:

1

<image src=&#39;../../img/button-top.png&#39; class=&#39;goTop&#39; hidden=&#39;{{!floorstatus}}&#39; bindtap="goTop"></image>

CSS:

1

2

3

4

5

6

7

8

9

10

/* 返回顶部 */

.goTop{

  height: 80rpx;

  width: 80rpx;

  position: fixed;

  bottom: 50rpx;

  background: rgba(0,0,0,.3);

  right: 30rpx;

  border-radius: 50%;

}

JS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

// 获取滚动条当前位置

onPageScroll: function (e) {

  console.log(e)

  if (e.scrollTop > 100) {

    this.setData({

      floorstatus: true

    });

  } else {

    this.setData({

      floorstatus: false

    });

  }

},

 

//回到顶部

goTop: function (e) {  // 一键回到顶部

  if (wx.pageScrollTo) {

    wx.pageScrollTo({

      scrollTop: 0

    })

  } else {

    wx.showModal({

      title: &#39;提示&#39;,

      content: &#39;当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。&#39;

    })

  }

},

二.使用scroll-view形式的回到顶部

1

2

<scroll-view scroll-y="" scroll-top="'{{topNum}}'" bindscroll="scrolltoupper">

<image src=&#39;../../img/button-top.png&#39; class=&#39;goTop&#39; hidden=&#39;{{!floorstatus}}&#39; bindtap="goTop"></image></scroll-view>

CSS:

1

2

3

4

5

6

7

8

9

10

/* 返回顶部 */

.goTop{

  height: 80rpx;

  width: 80rpx;

  position: fixed;

  bottom: 50rpx;

  background: rgba(0,0,0,.3);

  right: 30rpx;

  border-radius: 50%;

}

JS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

data:{

  topNum: 0

}

 

// 获取滚动条当前位置

scrolltoupper:function(e){

  console.log(e)

  let t =  e.detail.scrollTop;

  if (t > 100 && !this.data.floorstatus) {

      // 避免重复setData

      this.setData({

         floorstatus: true

      });

  }

   

  if(t <= 100 && this.data.floorstatus){

    this.setData({

      floorstatus: false

    });

  }

},

 

//回到顶部

goTop: function (e) {  // 一键回到顶部

  this.setData({

    topNum: this.data-Num = 0

  });

},



版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:关于小程序工作原理的深入解析与您是否了解
下一篇:微信小程序无法打开的具体原因及解决策略
相关文章

 发表评论

暂时没有评论,来抢沙发吧~