uniapp滚动页面改变背景颜色

简介: 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>

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

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

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

注意:需要在&lt;style>中设置.content的高度,否则无法滚动。

相关文章
|
7月前
|
JavaScript 数据安全/隐私保护 UED
UniApp 中的路由魔法:玩转页面导航与跳转
UniApp 中的路由魔法:玩转页面导航与跳转
1647 3
|
2月前
|
移动开发 JavaScript 前端开发
UniApp低代码-颜色选择器diy-color-picker-代码生成器
UniApp低代码-颜色选择器diy-color-picker-代码生成器
96 5
|
2月前
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
61 1
|
4月前
|
前端开发 小程序 JavaScript
uniapp手写滚动选择器
【8月更文挑战第6天】
67 4
|
5月前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
151 4
|
5月前
uniapp实战 —— 猜你喜欢(含滚动触底分页加载)
uniapp实战 —— 猜你喜欢(含滚动触底分页加载)
73 3
|
5月前
|
小程序 UED
uniapp 添加分包页面,配置分包预下载
uniapp 添加分包页面,配置分包预下载
106 2
|
5月前
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
1321 0
|
5月前
|
小程序
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
666 0
|
7月前
|
JavaScript 前端开发 小程序
uniapp中nvue页面如何全屏,map组件如何全屏?
uniapp中nvue页面如何全屏,map组件如何全屏?
400 3