DetailBackTop.vue 969 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!-- DetailBackTop.vue -->
  2. <template>
  3. <view class="div detail-back-top ">
  4. <view class="div" v-if="!isTop">
  5. <text class="span iconfont" @click="goBackTop()">&#xe65c;</text>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. data () {
  12. return {
  13. isTop: false
  14. }
  15. },
  16. props: {
  17. target: {}
  18. },
  19. created () {
  20. var that = this
  21. this.target.addEventListener('scroll', event => {
  22. if (this.target.scrollTop || this.target.scrollTop >= 100) {
  23. that.isTop = false
  24. } else {
  25. that.isTop = true
  26. }
  27. })
  28. },
  29. mounted () {
  30. },
  31. methods: {
  32. /*
  33. * goBackTop: 回到顶部
  34. */
  35. goBackTop () {
  36. this.target.scrollTop = 0
  37. this.isTop = true
  38. }
  39. }
  40. }
  41. </script>
  42. <style lang="scss" scoped>
  43. .detail-back-top {
  44. position: fixed;
  45. bottom:3rem;
  46. width:2.5rem;
  47. height:2.5rem;
  48. right:0.5rem;
  49. .div {
  50. width: 100%;
  51. height: 100%;
  52. .img {
  53. width:2.5rem;
  54. height:2.5rem;
  55. }
  56. }
  57. }
  58. </style>