如何在uniapp中实现图片不动的效果

在uniapp中实现图片不动的效果<sub>1</sub>，是在前端开发中比较常见的需求，其主要目的就是为了在页面滚动的时候，让部分内容保持原来的位置，不随着滚动而移动，也就是常说的页面固定效果。下面我将从实现原理、具体实现步骤等方面，为大家详细介绍一下在uniapp中实现图片不动效果的方法。

实现原理

首先，我们需要了解一下要实现图片不动的效果，需要用到position CSS属性，而position属性的值主要有以下几种：

static：默认属性，没有定位效果，位置由元素在文档流中的位置决定。

relative：相对定位，对该元素设置相对定位后，可以通过top、right、bottom、left属性进行微调。

absolute：绝对定位，对该元素设置绝对定位后，可以通过top、right、bottom、left属性进行微调，并且该元素会脱离文档流。

fixed：固定定位，对该元素设置固定定位后，可以通过top、right、bottom、left属性进行微调，并且该元素会相对于浏览器窗口进行定位。

因此，要实现图片不动的效果，我们需要把要固定的元素设置为position: fixed，然后再通过top、right、bottom、left属性进行微调，使其达到想要的效果。

具体实现步骤

步骤一：在页面中添加需要固定的元素

首先，在页面中添加需要固定的元素，可使用<img>标签来添加图片，也可使用<div>标签来添加其他内容。例如：

  <template>
    <div class="container">
      <img src="../static/images/fixedImg.jpg" class="fixed-img" />
      <div class="content">
        <p>这是一个需要滚动的内容，需要保持原来位置不动……</p>
        <p>这也是一个需要滚动的内容，需要保持原来位置不动……</p>
      </div>
    </div>
  </template>

步骤二：在CSS中设置需要固定的元素样式

接下来，在CSS中设置需要固定的元素样式，一般是设置position、top、left、right、bottom等属性。例如：

  .fixed-img {
    position: fixed;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
  }
  
  .content {
    margin-top: 400px; /* 设置图片距离顶部的距离 + 图片高度 */
    padding: 20px;
  }

步骤三：设置父容器高度

由于固定的元素会脱离文档流，因此在固定元素下方的其他内容可能会顶上去，因此需要在父容器上设置高度，以保证其他内容正常显示。例如：

  .container {
    position: relative;
    height: 1000px; /* 需要保证高度大于等于所有子元素高度之和 */
    overflow: scroll;
  }

步骤四：设置滚动容器

为了让页面可以滚动，需要为父容器设置overflow: scroll或overflow: auto属性，以便于内部内容超出父容器部分能够滚动。例如：

  .container {
    position: relative;
    height: 1000px;
    overflow: scroll;
  }

综上，我们可以得出完整的实现代码，如下所示：

  <template>
    <div class="container">
      <img src="../static/images/fixedImg.jpg" class="fixed-img" />
      <div class="content">
        <p>这是一个需要滚动的内容，需要保持原来位置不动……</p>
        <p>这也是一个需要滚动的内容，需要保持原来位置不动……</p>
      </div>
    </div>
  </template>
  
  <style>
    .fixed-img {
      position: fixed;
      top: 50px;
      left: 50px;
      width: 200px;
      height: 200px;
    }
    
    .content {
      margin-top: 400px;
      padding: 20px;
    }
    
    .container {
      position: relative;
      height: 1000px;
      overflow: scroll;
    }
  </style>

总结

通过上述步骤，我们可以很方便地实现在uniapp中实现图片不动效果，无论是移动端页面还是电脑端页面都可以使用。希望本篇文章能够对大家有所帮助，谢谢阅读！

参考文献

《uni-app官方文档》

张敏.前端开发技术与案例分析.机械工业出版社，2020.