微信小程序 导航栏背景色 随滚动条滚动而变化

//app.json 添加 (json 文件不能有注释)
"navigationStyle": "custom"

<view class="app">

    <view class="nav-top" style="padding-top: {{ statusBarHeight }}px; background-color: rgb(45, 183, 245, {{num}})">
        <view class="nav-top-img-view" bindtap="onBack">
            <image src="../../img/icons/arrow-left-bold.png"></image>
        </view>
    
        <view class="nav-top-title">标题</view>
        <view class="nav-top-img-view"></view>
    </view>
    
    <view class="list" style="padding-top: {{ statusBarHeight + 45 }}px">
        <view class="list-item">1</view>
        <view class="list-item">2</view>
        <view class="list-item">3</view>
        <view class="list-item">4</view>
        <view class="list-item">5</view>
    </view>
    
</view>

.nav-top{
  position: fixed;
  top: 0;
    left: 0;
    height: 45px;
    width: 100%;
    /* opacity: .5; */
    display: flex;
    flex-direction: row;
}

.nav-top-img-view {
    height: 45px;
    width: 45px;
}

.nav-top image {
    height: 20px;
    width: 20px;
    margin: 12.5px;
}

.nav-top-title {
    font-weight: bolder;
    text-align: center;
    line-height: 45px;
    flex: 1;
}

.list { 
    
}

.list-item {
    height: 50vh;
    margin: 20rpx;
    background-color: #ededed;
}

Page({
    data: {
        statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
        num: 0
    },

    onPageScroll (e) {
        if (e.scrollTop < 500) {
            this.setData({
                num: e.scrollTop / 500
            })
        } else {
            this.setData({
                num: 1
            })
        }
    },

})

• 小程序官方并不推荐频繁 setData
• 不过 iPhone 6s 上体验很流畅，所以暂时忽略，有更好的方案再更新

喜欢或对你有帮助，请点个赞吧 。

有错误或者疑问还请评论指出。

我的个人网站 --> 点击访问 。

END