小程序固定定位没生效原因

最新推荐文章于 2023-02-15 21:58:59 发布
最新推荐文章于 2023-02-15 21:58:59 发布
阅读量662 收藏 1
点赞数
分类专栏： CSS3 vue 文章标签： 小程序 vue.js uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44011751/article/details/125767292
版权
vue 同时被 2 个专栏收录
27 篇文章 2 订阅
订阅专栏
CSS3
10 篇文章 0 订阅
订阅专栏
今天遇到一个问题,就是我的一个购物车组件,正常情况公众号展示购物车组件是固定定位定在底部的

样式如图:

在这里插入图片描述
在这里插入图片描述
在小程序打开时,发现跑顶部去了,而且固定定位等样式都没生效
在这里插入图片描述

后来发现是因为我组件样式用的id来写,小程序没有读取到,于是将id改成类就可以了

在这里插入图片描述
完美解决,如果文章对你有所帮助,麻烦点个赞,谢谢!

舞空~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
小程序 video 组件在真机上固定在顶部样式失效
qq_45770253的博客
12-31 789
这篇文章，是我在开发小程序的时候，在一个页面中想要实现，上面是一个固定的视频区域，下面试可以滚动的其他信息区域。但是小程序的 video 标签，使用 fixed 或者是 sticky 进行定位在顶部后，在真机上测试会有问题。下面我就来解决这个问题 目录 文章目录目录1、概述2、解决方法 1、概述        我想做的样式是，让 mv 视频固定在页面的顶部，下面的信息区域可以进行上下滚动，但是如果直接渲染的话会存在问题，在真机上调试，.
微信小程序-元素的定位相对绝对固定
叉叉敌的博客
08-28 2309
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。...
微信小程序中position:fixed不起作用
xiaosheng
10-09 3899
微信小程序中，position:fixed不能和wx.createAnimation一起用，如果放在一起使用的话，position:fixed会不起作用
微信小程序学习(position定位方式)
m0_57547938的博客
08-18 2720
position定位方式 fixed与absolute区别 left与margin-left
钉钉小程序acss文件样式不生效是什么原因导致的
weixin_42596011的博客
02-15 589
钉钉小程序使用的是基于Web标准的小程序开发框架，其样式语言采用的是ACSS(Alibaba CSS)，类似于Web中的CSS语言。当ACSS文件中的样式不生效时，可能有以下几个原因： 文件路径错误：ACSS文件的路径设置不正确，无法找到对应的文件，导致样式不生效。 样式选择器错误：ACSS文件中的样式选择器选择不正确，或者没有选择到要修改的元素，导致样式不生效。 样式属性错误：ACSS文件...
微信小程序----position:sticky
12-20
这里，`top: 0`表示当元素顶部距离其最近的不滚动的祖先元素顶部0像素时，元素将变为固定定位。你可以根据需求调整`top`、`right`、`bottom`或`left`值。 在实际应用中，`position:sticky`常用于创建如侧边栏导航、...
微信小程序 css使用技巧总结
08-31
同时，确保父元素有`position: relative`，以便定位生效。例如： ```css .parent { position: relative; } .child { position: absolute; bottom: 30px; } ``` 6. **强制不换行与换行策略** `white-...
小程序自定义单页面、全局导航栏的实现代码
10-17
这个问题通常是由于设置了错误的样式导致的，需要确保导航栏的固定定位(fixed)和覆盖整个屏幕的宽度。 总的来说，自定义微信小程序的单页面和全局导航栏需要结合文档规定、配置选项以及样式编写技巧来实现。通过...
小程序组件之仿微信通讯录的实现代码
12-04
【微信小程序组件实现仿微信通讯录】\n\n在微信小程序开发中，有时我们需要创建具有类似微信通讯录功能的组件，以提供用户友好的界面和流畅的交互体验。本篇文章将分享一个使用小程序基础组件实现的仿微信通讯录组件...
详解css粘性定位position：sticky问题采坑
12-14
在页面滚动过程中，当元素距离其父元素达到设定阈值（如`top: 100px`）时，`position: sticky`会使元素变为固定定位，保持在屏幕的特定位置。这一特性在构建响应式布局，特别是创建如导航栏等始终保持可见的元素时...
修改带宽小技巧，加快下载速度
04-14
2. **定位到QoS策略**：在本地组策略编辑器中，依次展开`计算机配置` -> `管理模板` -> `网络` -> `QoS 数据包计划程序`。找到并双击右侧列表中的“限制可保留带宽”。 3. **修改QoS保留带宽**：在弹出的设置窗口中...
基于配置中心的轻量级动态线程池，内置监控告警功能，集成常用中间件线程池管理，可通过SPI自定义扩展实现
04-22
动态线程池不同于传统的固定线程池，它能够根据系统负载和业务需求实时调整线程数量，从而更好地应对流量波动，保证系统的稳定性和性能。这种线程池的灵活性和自适应性使得它在现代分布式系统中受到广泛应用。 二、...
iOS11.3以下modal中input光标错位的解决方法
08-26
* 使用JavaScript来阻止页面的touchmove事件，以固定底部页面。 * 恢复touchmove事件，以便页面可以自由滑动。 iOS11.3以下modal中input光标错位的解决方法需要根据实际情况进行选择和调整，以达到最佳的用户体验。...
中级数控铣理论知识题库完整.doc
09-25
49. 参考点含义：参考点是机床内部设定的固定点，与加工程序有关。 50. 游标卡尺用途：游标卡尺通常用于测量精密零件，不适合测量粗糙的毛坯件。 51. 插补精度：理想的插补运动轨迹应与实际运动轨迹一致。 52. ...
网页界面
02-20
此外，还有定位机制，如静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed），它们分别适用于不同的布局场景。 CSS还支持层叠（cascading）和继承（inheritance）特性。层叠意味着...
小程序fixed底部固定定位时，iPhone Xs Max不能正确显示问题
chaosama的博客
11-22 2886
我也是日了，同事有个iPhone Xs Max，发现在底部的绝对定位没法正确显示，想了下问题，应该是Xs的底部太低了。懒得处理，于是问了下小程序社区，看到同样问题的，9月官方就说开始解决了，现在还在，没办法，只能自己动手了。 1、先获取到当前手机型号 wx.getSystemInfo({ success:function(res){ that.setDat...
ios系统下微信小程序支付宝小程序fixed定位失效
a532443304的博客
10-15 1613
【问题代码】 <scroll-view> <viewclass="bottom"></view> </scroll-view> .bottom { position:fixed; bottom: 0; left: 0; right: 0; } 【问题描述】 类名为bottom的标签在页面不显示，消失了 (ios13不显示,ios1415正常) 【解决...
微信小程序fixed定位下scroll-view滚动失效
热门推荐
llixiangjian的博客
07-24 1万+
如图，上方nav是scroll-view的方式横向滚动，当给scroll-view的外出div加position: fixed; 定位时，scroll-view滚动就失效了。不知道大家有没有这种滚动的样例，固定在顶部，并且顶部nav可以横向滚动？谢谢 对应的wxml template name="search-fixed"> view class="fixed-container">
IOS 固定定位失效的分析与解决办法
EsquireY的博客
04-01 1490
1，固定定位失效 首先查看是不是固定定位没有应用上（IOS和Android 都测试一下） 猜想一，父元素使用了 transform 属性 解决方案 // 解决方法： .father{ transform:none; // 或者 display：inline; } 2， IOS固定定位失效 这里总结一下其他作者的观点，尽量不要用固定定位。 那你要说我不，那也不是没有办法。在确定不是因为 transform 属性的前提下，可以试试一些现成的组件（vant 的吸顶组件也可以达到 positio
抖音小程序 配置onShareAppMessage不生效
最新发布
06-27
如果配置后没有生效，可能有以下几个原因： 1. **检查语法和配置位置**：确保你在正确的生命周期方法中（如`onLoad`或`onReady`）正确设置了`onShareAppMessage`，并且没有语法错误。 ```javascript Page({ ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值