Use uniapp to achieve scrolling ceiling effect

Use uniapp to achieve scrolling ceiling effect

When developing mobile applications, we often encounter the need to fix page elements at the top of the page during scrolling. Demand, this is the rolling ceiling effect. This article will introduce how to use the uniapp framework to achieve the scrolling ceiling effect, and give specific code examples.

1. Implementation ideas
To achieve the scrolling ceiling effect, we need the following steps:

1. Listen to the scrolling event of the page and obtain the scrolling distance;
2. Determine whether the scrolling distance exceeds the specified position. If it does, fix the element that needs to be ceiling-mounted at the top of the page. Otherwise, cancel the ceiling-ceiling effect.

2. Code Implementation

1. In the page that needs to achieve the scrolling ceiling effect, add an element that needs to be ceiling-mounted, and set its initial position to the top of the page.
2. In the onPageScroll life cycle function of the page, listen to the scroll event and obtain the scrolling distance.
3. Determine whether the scrolling distance exceeds the specified position, and set whether the element is ceiling-mounted by dynamically binding the style attribute.
4. Add a placeholder element to the page to keep the page content at its original height and prevent page jitter.

The following is a specific code example:

<template>
  <view>
    <!-- 需要吸顶的元素 -->
    <view class="sticky" :style="stickyStyle">{{ text }}</view>
    
    <!-- 页面内容 -->
    <view class="content">
      <!-- 此处省略页面内容 -->
    </view>
    
    <!-- 占位元素 -->
    <view class="placeholder" v-show="showPlaceholder"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        text: '滚动吸顶效果',
        stickyStyle: '', // 吸顶元素的样式
        showPlaceholder: false // 是否显示占位元素
      }
    },
    onUnload() {
      // 当页面离开时，需要重置吸顶元素的样式
      this.stickyStyle = ''
    },
    onPageScroll(e) {
      // 监听页面滚动事件
      if (e.scrollTop > 100) {
        // 当滚动距离超过100时，设置吸顶元素的样式，使其固定在页面顶部
        this.stickyStyle = 'position: fixed; top: 0; left: 0; width: 100%; z-index: 999;'
        this.showPlaceholder = true
      } else {
        // 滚动距离不足100时，取消吸顶效果
        this.stickyStyle = ''
        this.showPlaceholder = false
      }
    }
  }
</script>

<style lang="scss">
  .sticky {
    /* 设置吸顶元素的样式 */
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: #f5f7fa;
    color: #333;
  }
  
  .content {
    /* 设置内容容器的样式 */
    /* ... */
  }
  
  .placeholder {
    /* 设置占位元素的样式 */
    height: 100px;
  }
</style>

The above code is based on the uniapp framework, and achieves the scrolling ceiling effect through page scroll event monitoring and dynamic binding of style attributes. Among them, by setting the style of the ceiling element (position: fixed; top: 0; left: 0; width: 100%; z-index: 999;), it will appear when the scroll distance exceeds the specified position. Fixed at the top of the page, by adding placeholder elements to maintain the original height of the page content and prevent the page from shaking.

I hope the above code examples can help you achieve the scrolling ceiling effect. If you have any questions, please ask and we will try our best to answer them.

The above is the detailed content of Use uniapp to achieve scrolling ceiling effect. For more information, please follow other related articles on the PHP Chinese website!