uniapp 小程序 列表 背景图 根据列表高度背景图高度自适应

在 UniApp 小程序中，为了让列表背景图片能够根据列表内容的高度自适应，你需要结合 CSS 的 `background-size` 属性和 JavaScript 来实现。首先，在 CSS 中，你可以设置背景图片的大小为 `cover` 或 `contain`，这两个值可以确保背景图片始终填充其容器，无论容器大小如何变化。

例如，如果你有一个名为 `list-wrap` 的列表容器，你可以这样做：

.list-wrap {
  background-image: url('your-background-image.jpg');
  background-size: cover;
  /* 或者 */
  background-size: contain;
}

接着，你可以使用 JavaScript 监听列表的高度变化，当高度改变时动态调整背景图的 CSS。这里涉及到一些样式操作，通常可以利用 `setStyle` 方法来更新样式：

Page({
  data: {
    listHeight: 0
  },

  onReady: function () {
    this.updateBackgroundSize();
  },

  updateBackgroundSize: function () {
    const listWrap = document.querySelector('.list-wrap');
    listWrap.offsetHeight; // 获取真实高度
    listWrap.style.backgroundSize = 'cover'; // 或者 'contain'
    this.setData({
      listHeight: listWrap.offsetHeight
    });
  },

  onScrolltolower: function (e) {
    // 当列表滚动到底部时，再次更新背景高度
    this.updateBackgroundSize();
  }
})

这段代码会在页面准备就绪时初始化一次，并在用户滚动列表底部时再次更新背景大小。