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

1设置一个标题


标题名称

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', // 恢复初始的标题栏背景颜色
      });
    }
  },
});

你可能感兴趣的:(小程序,前端,html)