微信小程序中实现回到顶部效果的方法与技巧

<scroll-view style="height: 100%;" scroll-y="true" scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun">

<view style="height: 11111rpx; border: solid 1px red;">

123456

----{{test}}

</view>

</scroll-view>

<view style="position: absolute; bottom: 50rpx; right: 30rpx; width: 120rpx; height: 120rpx; border: solid 1px green;" wx:if="{{scrollTop.goTop_show}}" catchtap="goTopFun"></view>

Page({

  data: {

    test: "",

    scrollTop: {

      scroll_top: 0,

      goTop_show: false

    }

  },

  scrollTopFun: function (e) {

    console.log(e.detail);

    if (e.detail.scrollTop > 300) {//触发gotop的显示条件

      this.setData({

        'scrollTop.goTop_show': true

      });

      console.log(this.data.scrollTop)

    } else {

      this.setData({

        'scrollTop.goTop_show': false

      });

    }

  },

  goTopFun: function (e) {

    var _top = this.data.scrollTop.scroll_top;//发现设置scroll-top值不能和上一次的值一样，否则无效，所以这里加了个判断

    if (_top == 1) {

      _top = 0;

    } else {

      _top = 1;

    }

    this.setData({

      'scrollTop.scroll_top': _top

    });

    console.log("----");

    console.log(this.data.scrollTop)

  }

})