1设置一个标题

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

2根据滚动的距离来改变标题栏的背景颜色。 可以在页面的 onPageScroll 方法中通过判断滚动的距离，来改变标题栏的背景颜色。例如，当滚动距离超过某个阈值时，设置标题栏的背景颜色为指定的颜色。

// 在页面的js文件中
Page({
  data: {
    // 初始的标题栏背景颜色
    titleBarColor: 'transparent',
  onPageScroll: function (event) {
    // 获取滚动的距离
    const scrollTop = event.scrollTop;
    // 判断滚动的距离，设置标题栏的背景颜色
    if (scrollTop > 100) {
      this.setData({
        titleBarColor: 'red', // 设置标题栏的背景颜色为红色
    } else {
      this.setData({
        titleBarColor: 'transparent', // 恢复初始的标题栏背景颜色
				
微信小程序（设置当前页面标题颜色背景）
全局的属性在全局app.json里面设置，如果要设置单独界面里面的属性，就在那个文件夹底下的XXX.json里面设置就可以了。
  "navigationBarBackgroundColor": "#b3d4db",
  "navigationBarTitleText": "服务中心",
  "navigationBarTextStyle": "w.
  "navigationBarBackgroundColor": "#b3d4db",
  "navigationBarTitleText": "服务中心",
  "navigationBarTextStyle": "white"
				
可以使用 wxs 实现左右滚动，同时为小程序添加背景色，具体实现可以参考以下代码：
1. 在 wxml 文件中添加 scroll-view 组件，同时为该组件添加 class 和 style 属性，使其具有滚动和背景色属性：
<scroll-view class="scroll-view" style="background-color: #f0f0f0;">
  <view class="list">
    <!-- 左右滚动内容区域 -->
  </view>
</scroll-view>
2. 在 wxss 文件中为 scroll-view 和 list 添加样式属性：
.scroll-view {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
.list {
  display: inline-block;
  width: 100%;
通过以上设置，即可实现小程序的左右滚动同时拥有背景色。