小程序滚动时使标题背景颜色改变

<!-- 在页面的wxml文件中 -->
<view class="title-bar" style="background-color: {{titleBarColor}};width：100%；height：200px">标题名称</view>

// 在页面的js文件中
Page({
  data: {
    // 初始的标题栏背景颜色
    titleBarColor: 'transparent',
  },
  onPageScroll: function (event) {
    // 获取滚动的距离
    const scrollTop = event.scrollTop;
    // 判断滚动的距离，设置标题栏的背景颜色
    if (scrollTop > 100) {
      this.setData({
        titleBarColor: 'red', // 设置标题栏的背景颜色为红色
      });
    } else {
      this.setData({
        titleBarColor: 'transparent', // 恢复初始的标题栏背景颜色
      });
    }
  },
});