flexible.vue 944 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <!-- #ifdef APP-NVUE -->
  3. <view class="uni-flexible">
  4. <slot />
  5. <view class="flexible-line" @appear="handleAppear" @disappear="handleDisappear"></view>
  6. </view>
  7. <!-- #endif -->
  8. <!-- #ifndef APP-NVUE -->
  9. <view>
  10. <slot />
  11. <view class="flexible-line"></view>
  12. </view>
  13. <!-- #endif -->
  14. </template>
  15. <script>
  16. export default {
  17. name: 'UniFlexible',
  18. props: {},
  19. data() {
  20. return {}
  21. },
  22. mounted() {
  23. },
  24. methods: {
  25. createObserver(e) {
  26. observer = uni.createIntersectionObserver(this);
  27. observer.relativeTo('.scroll-view').observe('.flexible-line', (res) => {
  28. })
  29. },
  30. handleAppear(e) {
  31. //console.log(e);
  32. this.$emit("flexible1", e);
  33. },
  34. handleDisappear(e) {
  35. //console.log(e);
  36. this.$emit("flexible0", e);
  37. }
  38. }
  39. }
  40. </script>
  41. <style>
  42. .uni-flexible {
  43. position: relative;
  44. }
  45. .flexible-line {
  46. position: absolute;
  47. left: 0;
  48. right: 0;
  49. bottom: 2px;
  50. height: 1px;
  51. }
  52. </style>