uniapp滚动页面改变背景颜色

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

下面是一个示例代码:




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

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

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

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

你可能感兴趣的:(uni-app)