uniapp滚动页面改变背景颜色

可以利用uni-app自带的组件scroll-view，结合@scroll事件实现滚动时改变背景颜色的效果。

下面是一个示例代码：

<template>
  <view style="background-color: {{bgColor}}">
    <scroll-view class="scroll-view" @scroll="onScroll">
      <view class="content">
        <!-- 页面内容 -->
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bgColor: '#fff' // 初始背景色为白色
    }
  },
  methods: {
    onScroll(e) {
      // 获取滚动条位置
      const scrollTop = e.detail.scrollTop
      // 根据滚动条位置改变背景色
      if (scrollTop > 100) {
        this.bgColor = '#f5f5f5'
      } else {
        this.bgColor = '#fff'
      }
    }
  }
}
</script>

在<template>中，首先设置了一个view作为页面的根容器，并且将背景色绑定到了bgColor数据上。

接下来使用scroll-view作为滚动容器，并且注册了@scroll事件，当滚动时触发该事件。

在<script>中，定义了onScroll方法来处理滚动事件。获取当前滚动条的位置，当滚动条位置大于100时，将背景色改为灰色，否则为白色。

注意：需要在<style>中设置.content的高度，否则无法滚动。文章来源地址https://uudwc.com/A/0kaqe