scroll-top

回到顶部，nvue回到顶部查看源码中首页【nvue商品列表】

组件结构

  1. <template>
  2.     <view class="tui-scroll-top" :style="{bottom:bottom+'rpx',right:right+'rpx'}" v-show="visible && toggle" @tap.stop="goTop">
  3.         <image class="tui-scroll-top-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACKklEQVRoQ+3b61HDMAwAYGkC1AlgBEaADcoEtBNQNoAJKBNQJqAbsAIjlAkiJhBnruG4XBO/1TNVfjZx4k+yXJ+bIpzYgSfmBQP/94xbhocZJqJLADhrJPNfzPwx1dfJDBPRHBHfGsH+dFNEbph5O9ZnH3iDiLeNgV+ZeZEKPq0Muyjta3jeSJa3WTXcCDKqm/a1FBWuBi9WzzAR3QFAPye4mnvWjJsamIgIAN4R0S1kfg8RcQuFa2ZmDbgKeAzbAzXR1cE+rDa6KjgUq4muBo7FaqGrgCcmqCUivgwmrUOfVZvIioOnsMy8mc1m8hfcdR0S0eJAIKqgi4J9WAc9BN6v2VXQxcAh2CmwFroIOBTrA2ugs8Ex2BBwbXQWOBYbCq6JTganYGPAtdBJ4FRsLLgGOhqcg00Bl0ZHgXOxqeCS6GBwCWwOuBQ6CFwKmwsugQ4FrxDxabjod2vj2F2KsaVlzH1G1t73zLz23ScJLCLLFGyJDPegIVpEioLdfpSL3gUAbFKxJcH98AYA97PKDgBWIftiQRn2DZOY8yWGdMzzhtcaOCd6IW0tw12nOspUH1Z60goZUVbDKVHKaWM1bDWcM378bW3S8sco7wqrYavhvBHka2017ItQ7nmrYavh3DE03V69holoh4jnrlsi8snMbhdF7TgGeI2I7l0tB35k5gc1LcBx/vNARFcA4LagJl/mrhEI9QzXQMTc08Ax0WrxWstwi1mL6fM3Q1/xTKsOmbgAAAAASUVORK5CYII="></image>
  4.     </view>
  5. </template>

组件脚本

  1. <script>
  2.     export default {
  3.         name: "tuiScrollTop",
  4.         props: {
  5.             //回顶部按钮距离底部距离 rpx
  6.             bottom: {
  7.                 type: Number,
  8.                 default: 120
  9.             },
  10.             //回顶部按钮距离右侧距离 rpx
  11.             right: {
  12.                 type: Number,
  13.                 default: 24
  14.             },
  15.             //距离顶部多少距离显示 px
  16.             top: {
  17.                 type: Number,
  18.                 default: 100
  19.             },
  20.             //滚动距离
  21.             scrollTop: {
  22.                 type: Number
  23.             }
  24.         },
  25.         watch: {
  26.             scrollTop(newValue, oldValue) {
  27.                 this.change();
  28.             }
  29.         },
  30.         data() {
  31.             return {
  32.                 //判断是否显示
  33.                 visible: false,
  34.                 //控制显示，主要解决调用api滚到顶部fixed元素抖动的问题
  35.                 toggle: true
  36.             };
  37.         },
  38.         methods: {
  39.             goTop: function() {
  40.                 this.toggle = false;
  41.                 uni.pageScrollTo({
  42.                     scrollTop: 0,
  43.                     duration: 120
  44.                 })
  45.                 setTimeout(() => {
  46.                     this.toggle = true
  47.                 }, 220)
  48.             },
  49.             change() {
  50.                 let show = this.scrollTop > this.top;
  51.                 if ((show && this.visible) || (!show && !this.visible)) {
  52.                     return
  53.                 }
  54.                 this.visible = show
  55.             }
  56.         }
  57.     }
  58. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "bottom" : 回顶部按钮距离底部距离 rpx
     "right":回顶部按钮距离右侧距离 rpx
     "top":距离顶部多少距离显示 px
     "scrollTop":滚动距离

 methods:
   "goTop":返回顶部事件
   "change":当滚距离发生改变时执行，判断是否显示回顶部按钮

示例

... 此处省略n行,下载源码查看