sticky

sticky吸顶容器

组件结构

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

组件脚本

  1. <script>
  2. exportdefault{
  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