sticky

sticky吸顶容器

组件结构

  1. <template>
  2. <view class="tui-sticky-class">
  3. <!--sticky 容器-->
  4. <view :class="[isFixed === true ? 'tui-sticky-fixed' : '']">
  5. <slot name="header"></slot>
  6. </view>
  7. <!--sticky 容器-->
  8. <!--内容-->
  9. <slot name="content"></slot>
  10. </view>
  11. </template>

组件脚本

  1. <script>
  2. export default {
  3. name: "tuiSticky",
  4. props: {
  5. scrollTop: {
  6. type: Number
  7. }
  8. },
  9. watch: {
  10. scrollTop(newValue, oldValue) {
  11. this.updateStickyChange();
  12. }
  13. },
  14. // #ifdef H5
  15. mounted() {
  16. this.updateScrollChange();
  17. },
  18. // #endif
  19. onReady() {
  20. this.updateScrollChange();
  21. },
  22. data() {
  23. return {
  24. timer: null,
  25. top: 0,
  26. height: 0,
  27. isFixed: false
  28. };
  29. },
  30. methods: {
  31. updateStickyChange() {
  32. const top = this.top;
  33. const height = this.height;
  34. const scrollTop = this.scrollTop
  35. this.isFixed = (scrollTop >= top && scrollTop < top + height) ? true : false
  36. },
  37. updateScrollChange() {
  38. if (this.timer) {
  39. clearTimeout(this.timer)
  40. this.timer = null
  41. }
  42. this.timer = setTimeout(() => {
  43. const className = '.tui-sticky-class';
  44. const query = uni.createSelectorQuery().in(this);
  45. query.select(className).boundingClientRect((res) => {
  46. if (res) {
  47. this.top = res.top;
  48. this.height = res.height
  49. }
  50. }).exec()
  51. }, 0)
  52. }
  53. }
  54. }
  55. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "scrollTop" : 滚动条距离顶部距离,类型:"Number"

 methods:
   "updateStickyChange":scrollTop与元素top比较,判断元素是否吸顶
   "updateScrollChange":获取元素的top值,以及height值


示例

... 此处省略n行,下载源码查看

rate swipe-action