My_listbox.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <view class="container">
  3. <view id="mylisttop" />
  4. <scroll-view class="scroll-view" scroll-y :refresher-enabled='pullDown' :refresher-triggered='inRefresh'
  5. :style="{ height: height + 'px' }" :triggered='true' @refresherrefresh='pullToRefresh' :lower-threshold='300'
  6. @scrolltolower='loadThePage'>
  7. <slot />
  8. </scroll-view>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. name: 'My_listbox',
  14. components: {
  15. },
  16. props: ["getlist", "pullDown"],
  17. data() {
  18. return {
  19. inRefresh: false, //下拉开启自定义项
  20. height: 0
  21. };
  22. },
  23. methods: {
  24. /* 下拉刷新 */
  25. pullToRefresh() {
  26. this.inRefresh = true
  27. this.$emit("getlist", true)
  28. },
  29. /* 刷新完成 */
  30. RefreshToComplete() {
  31. setTimeout(() => {
  32. this.inRefresh = false
  33. }, 500)
  34. },
  35. /* 加载分页 */
  36. loadThePage() {
  37. this.$emit("getlist", false)
  38. },
  39. /* 设置组件高度 */
  40. setHeight() {
  41. this.getHeight("#mylisttop", this).then(height => {
  42. if (this.height != height) this.height = height
  43. });
  44. }
  45. },
  46. }
  47. </script>
  48. <style lang="scss" scoped>
  49. .scroll-view {
  50. position: relative;
  51. }
  52. /* 适配苹果手机底部安全距离 */
  53. .safety {
  54. height: constant(safe-area-inset-bottom);
  55. height: env(safe-area-inset-bottom);
  56. }
  57. </style>