sticky.nvue 963 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <view class="u-page">
  3. <!-- <u-navbar
  4. title="吸顶"
  5. @leftClick="navigateBack"
  6. safeAreaInsetTop
  7. fixed
  8. placeholder
  9. ></u-navbar> -->
  10. <view class="u-demo-block">
  11. <text class="u-demo-block__title">基础使用</text>
  12. <u--text
  13. type="content"
  14. text="滚动页面,即可看到下方的按钮会吸顶。"
  15. ></u--text>
  16. <!-- #ifdef APP-NVUE -->
  17. <u--text
  18. type="warning"
  19. text="目前由于nvue的bug,设置sticky的top值无效。"
  20. ></u--text>
  21. <!-- #endif -->
  22. </view>
  23. <u-sticky>
  24. <u-button
  25. text="吸顶按钮"
  26. type="success"
  27. ></u-button>
  28. </u-sticky>
  29. <u-gap
  30. bgColor="#fff"
  31. height="1500px"
  32. ></u-gap>
  33. <u-divider text="已到底部"></u-divider>
  34. </view>
  35. </template>
  36. <script>
  37. export default {
  38. data() {
  39. return {
  40. }
  41. },
  42. mixins: [uni.$u.mixin],
  43. methods: {
  44. navigateBack() {
  45. uni.navigateBack()
  46. }
  47. }
  48. }
  49. </script>
  50. <style lang="scss">
  51. .u-page {
  52. }
  53. </style>