scroll-top

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

组件结构

  1. <template>
  2. <viewclass="tui-scroll-top" :style="{bottom:bottom+'rpx',right:right+'rpx'}"v-show="visible && toggle" @tap.stop="goTop">
  3. <imageclass="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. exportdefault{
  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行,下载源码查看