DetailBackTop.vue 975 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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. methods: {
  31. /*
  32. * goBackTop: 回到顶部
  33. */
  34. goBackTop () {
  35. this.target.scrollTop = 0
  36. this.isTop = true
  37. }
  38. }
  39. }
  40. </script>
  41. <style lang="scss" scoped>
  42. .detail-back-top {
  43. position: fixed;
  44. bottom: 3rem;
  45. width: 2.5rem;
  46. height: 2.5rem;
  47. right: 0.5rem;
  48. .div {
  49. width: 100%;
  50. height: 100%;
  51. .img {
  52. width: 2.5rem;
  53. height: 2.5rem;
  54. }
  55. }
  56. }
  57. </style>