【微信小程序】微信小程序自定义标题跟随滚动

js代码：

// 滚动
  onPageScroll(e) {
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
    })
    let btn = wx.getMenuButtonBoundingClientRect()
    let height = (btn.top + btn.height) * 2
    if (e.scrollTop > 40) {
      animation.backgroundColor(`rgba(255,255,255,${1})`)
      animation.height(`${height}rpx`).step()
    } else {
      animation.backgroundColor(`rgba(0,0,0,${0})`).step()
    }
    this.setData({
      animation
    })
  },

在这段代码中，首先通过​​wx.createAnimation​​创建了一个动画实例，用于后续定义动画效果。​​wx.getMenuButtonBoundingClientRect​​获取了菜单按钮的位置和尺寸信息，然后根据这个信息计算出一个​​height​​值。接着，根据页面滚动的距离​​e.scrollTop​​来判断是否超过 40 像素。如果超过，就设置动画的背景颜色为不透明的白色，并且高度为计算出的​​height​​值；如果没有超过，就设置背景颜色为完全透明的黑色。最后，通过​​this.setData​​将动画数据更新到页面的数据中，这样就能在界面上看到相应的动画效果。

wxml代码：

<headBack text="" url="pages/classify/classify" animation="{{animation}}" clear="{{false}}" />

在 WXML 中，​​headBack​​​是一个自定义组件。通过​​animation="{{animation}}"​​​，将在 JavaScript 中定义的动画数据传递给这个自定义组件，这样组件就可以根据动画数据来展示相应的动画效果。​​url​​​属性指定了一个跳转的页面路径，​​text​​​属性为空，​​clear​​​属性设置为​​false​​。

通过这样的代码组合，实现了一个根据页面滚动来改变元素样式（背景颜色和高度）的动画效果，为小程序的界面交互增添了动态和响应式的体验。