微信小程序中background-attachment:fixed兼容问题

前提

在微信小程序的页面中使用了background-attachment:fixed;属性，在安卓机型中适用，但在苹果机型中失效了，导致背景图样式没有固定。

原因

固定背景导致重绘的成本很高，在苹果手机上该属性可能被禁止。

解决方案

wxml

在wxml的盒子定义个class,引入图片我用的是行内样式，使用js中的变量（主要解决动态背景图的需求）

<view class="background-fixed" style="--background-image: url('{{backgroundUrl}}');">

 js

data: {
    backgroundUrl: ''
  },

wxss

.background-fixed:before {
  content: ' ';
  position: fixed;  
  z-index: -1;  
  top: 0;
  right: 0;  
  bottom: 0;  
  left: 0;  
  background-repeat: no-repeat;
  background-position: center;
  background-repeat: no-repeat;
  background: var(--background-image) center 0 no-repeat;
  background-size: cover;
}

结语

此方法主要解决在微信小程序中固定背景图片且背景图为动态获取的需求。

如果有更好的方法欢迎在评论区讨论^_^