uniapp跨平台开发---页面悬浮icon,滚动消失,静止显示

​

 实现思路

1. ​布局定位：使用position: fixed固定悬浮图片位置，确保其始终位于屏幕指定区域
2. ​滚动监听：通过onPageScroll事件监听页面滚动，动态修改图片容器宽度或位移。
3. ​过渡动画：利用CSS的transition属性实现宽度/位移变化的平滑过渡效果

具体实现

 template 

<!-- 悬浮图片容器 -->
        <view class="float-image" :class="[isScrolling?'half-mode':''  ]">
            <image src="@/static/help-images/help-fix-icon.png" mode="aspectFit" class="image-content" />
        </view>

script

<script>
export default {
  data() {
    return {
      isScrolling: false,
      scrollTimer: null
    };
  },
  onPageScroll(e) {
    // 滚动时触发状态变化
    this.isScrolling = true;
    
    // 防抖处理：停止滚动500ms后恢复完整展示
    clearTimeout(this.scrollTimer);
    this.scrollTimer = setTimeout(() => {
      this.isScrolling = false;
    }, 500);
  }
};
</script>

注意: onPageScroll监听滚动事件会有无法触发的情况,这种现象一般是两种情况造成的

1.页面高度没有超过窗口高度,可以给父节点添加样式min-height:100vh;

2.App.vue 设置纵向不能滑动,取消设置就可以了

style

.float-image {
        position: fixed;
        right: -6rpx;
        bottom: 40vh;
        width: 492rpx;
        height: 120rpx;
        transition: all 0.5s ease-in-out;
        /* 过渡动画 */
        overflow: hidden;
    }

    .image-content {
        width: 492rpx;
        height: 120rpx;
    }

    /* 滚动时样式 */
    .half-mode {
        width: 136rpx;
        height: 120rpx;
        right: -6rpx;
    }

效果

静止效果

​

滑动效果

 ​

​