前提

在微信小程序的页面中使用了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;
}

结语

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

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

微信小程序中background-attachment:fixed兼容问题相关推荐

微信小程序中转换时间格式IOS不兼容的问题
微信小程序中转换时间格式IOS不兼容的问题昨天小程序上要显示一个截止日期,遇到了这个问题,调试了才找到问题的所在,然后在网上找了资料才知道这个问题的原因,原来是因为IOS系统不支持2020-12-3 ...
微信小程序中new Date()转换时间格式时，IOS不兼容的问题
平常我们获取某一个指定时间的时间戳时,都是这样获取 new Date('2021-10-11 00:00:00').getTime() 但是,2021-10-11这种时间格式在ios微信小程序中并不支 ...
微信小程序中自定义导航和地图定位
在健康码中,主要的难点技术就是在小程序中定位.自定顶部导航. 自定义导航在微信小程序中,默认的顶部导航不能设置图片背景或者是透明背景,只能自定义导航. 在每一个页面中引入,就是得到自己定义[个性化的 ...
小程序中的css样式有哪些,微信小程序中css样式media标签
前沿:微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需在css中我们使用media标签来区分调用哪个css样式, ...
微信小程序中绘制图表（AntV F2 的使用）
1.安装小程序F2组件 npm i @antv/f2-canvas 2.安装好相关依赖包之后,使用微信开发者工具运行项目,点击开发者工具顶部详情,勾选使用npm模块,再点击菜单栏中工具下的构建npm ...
如何在微信小程序中使用ECharts图表
在微信小程序中使用ECharts 1. 下载插件首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目. 下载链接:ecomfe/echarts-for-weixi ...
微信在线客服 php,微信小程序中添加联系在线客服功能
这次给大家带来微信小程序中添加联系在线客服功能,微信小程序中添加联系在线客服功能的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 普通客服按钮添加客服-联系我们 2. 悬浮客服按钮添加,图片自 ...
Canvas 动画引擎解析与微信小程序中的应用
点击观看大咖分享抗击疫情,腾讯云在行动.在开发微信小程序的过程中,我们经常需要展现一些图形和图表.目前市面上有好几款常用的图形库,在这些图形库的底层都有渲染引擎在支撑. ZRender 是其中一款非 ...
微信小程序中自定义组件
文章目录小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 自定义组件 compone ...

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

前提

原因

解决方案

wxml

js

wxss

结语

微信小程序中background-attachment:fixed兼容问题相关推荐

最新文章

热门文章