微信小程序ios端的下拉刷新，页面顶部元素使用了fixed的坑

最新推荐文章于 2021-07-30 09:01:08 发布

今天2岁

最新推荐文章于 2021-07-30 09:01:08 发布

阅读量1.3k

点赞数 4

文章标签： css

本文链接：https://blog.csdn.net/jiangyue2694/article/details/108716470

版权

在微信小程序中，下拉刷新的时候，如果有东西使用了固定定位，且固定在顶部，
这个时候ios端下拉的时候是不会把固定的东西下拉下来的但是这个时候，我们又需要他固定在这个位置，这个时候我们可以用这个

position: sticky;

问题就可以解决了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

今天2岁

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

微信小程序页面事件 - 下拉刷新与上拉触底

m0_61631823的博客

03-22

7619

一、下拉刷新 1.概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。 2. 启用下拉刷新 启用下拉刷新有两种方式： ①全局开启下拉刷新 在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true ②局部开启下拉刷新 在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true 在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下

ios微信小程序下拉刷新怎么配_[wx]微信小程序自定义下拉刷新

weixin_39594296的博客

12-19

791

需求：在小程序内存在列表等形式的页面内增加下拉刷新功能，提高用户体验感，加强界面操作与交互性；实现方法：1、小程序提供的下拉刷新(无法自定义刷新动画)在页面设置内开启下拉(单独页面设置)；{"enablePullDownRefresh": true,}使用onPullDownRefresh()监听用户下拉操作，实现刷新操作；也可以通过wx.startPullDownRefresh和wx.stopP...

参与评论您还未登录，请先登录后发表或查看评论

小程序开发踩坑记录（四）——fixed元素在下拉刷新时会被遮挡且双端表现不一致问题（自制底部tabbar时会遇到的的bug）

王小烦的博客

04-18

7022

①问题描述 微信小程序提供了官方的底部导航栏-tabbar，但项目中为满足设计要求、实现更好的效果，需要自己模拟底部导航栏。而在制作过程中就发现了问题。自制底部导航栏的基本思路为：将自制导航元素在index页面底部使用 { display：fixed } 定位，其中的各个导航图标控制index内多个 component 的 wx:if 从而实现模拟的页面跳转（实际是在一个页面内的显示隐藏）。如...

微信小程序下拉刷新时顶部tab元素不随着下拉移动

热门推荐

yangshuolll的专栏

06-26

1万+

顶部tab元素用fixed固定，设置了top属性。发下在微信小程序中使用onPullDownRefresh()时，顶部tab元素不随着下拉操作移动。所以将tab元素的top属性取消，这样就可以实行顶部tab组件随下拉操作移动。...

解决小程序页面底部块设置fixed，ios下拉出现回弹遮盖底部块的问题

xwc999

03-18

1317

这个问题我的解决方式是，安卓因为没有问题，所以不改变，而ios出现问题，在被遮盖地方的最外层父级标签加上padding-bottom:xxx; 判断系统型号，这里我是写在app.js里面，也可以单独调用 app.js： wx.getSystemInfo({ success: function (a) { var w = a.s...

ios 中fixed布局的页头和叶尾会被上拉和下拉覆盖

qq_33357911的博客

07-30

354

ios 中fixed布局的页头和叶尾会被上拉和下拉覆盖 dealScroll.js /** * 是否根 * @param {dom} obj */ function isDocument(obj) { return obj != null && obj.nodeType == obj.DOCUMENT_NODE; } /** * 处理touch事件 * @param {event} e 事件对象 */ const eventTouch = function (e) {

微信小程序开发之IOS和Android兼容的问题

08-29

微信小程序开发在不同移动设备平台如IOS和Android上运行时，开发者常常会遇到一些兼容性问题。针对IOS和Android平台的兼容性问题，主要可以从以下几个方面进行理解和解决。一、时间转换问题：时间格式化是大多数...

微信小程序 - IOS 仿饿了么＂我的＂,下拉橡皮筋效果

03-29

* IOS专用顶部下拉橡皮筋效果 * 安卓的Page在到达顶部的时候,不能继续下拉...略过 * * 效果见饿了么送餐服务 "我的" 页面 IOS环境上下拖动 * * 下拉时, 顶部色块拉伸,上划时,顶部色块收缩. * wxml : <view ...

微信小程序长图超过屏幕页面不能下拉_微信小程序的页面弹窗过长滚动导致的底层滚动（滚动穿透问题）解决办法...

weixin_39576127的博客

02-05

2760

对于微信小程序，弹窗时，如果弹窗内容过长，需要滚动，滚动同时，底部页面跟着滚动，这如何优雅的处理这个问题？处理1(不推荐)： --添加position:fixed弹窗时通过给底部最大的view标签添加position:fixed;，从而达到页面不会跟着弹窗滚动超长底部内容弹窗超长内容缺点：在取消了该属性后，页面自动滚动回页面顶部，失败。处理2(不推荐)：--添加catchtouchmove 事...

iOS 玩转微信——下拉小程序

u011581932的博客

08-04

1714

⭐️ 概述本文笔者将手把手带领大家像素级还原微信下拉小程序的实现过程。尽量通过简单易懂的言语，以及配合关键代码，详细讲述该功能实现过程中所运用到的技术和实现细节，以及遇到问题后如何解决的心得体会。希望正有此功能需要的小伙伴们，能够通过阅读本文后，能快速将此功能真正运用到实际项目开发中去。当然，笔者的实现方案不一定是微信官方的实现，毕竟一千个观众眼中有一千个潘金莲，但是，不管黑猫白猫，能捉老鼠的就是好猫，若能够实现此功能，相信也是一个不错的方案。希望该篇文章能为大家提供一点思路，少走一些弯路，填补

微信小程序自定义 下拉刷新

Eitaqx 的博客

12-05

2892

微信小程序自定义 下拉刷新 因为自定义BarTitle 的原因，小程序自带的下拉刷新，对整个 page 中的内容都会有移动，只能自己写了；找了一些实现的方法，基本都是使用 scroll-view 去实现的，但是没有见到过源码；把自己写的源码整理一下，为了方便使用直接写成组件的形式；因为时间关系，有一些不完善，后续会继续完善。。。 wxml （主要绑定一些事件） &amp;amp;amp;lt;image src='l...

在ios的webview中使用fixed在顶部的内容导致下拉刷新被阻挡问题。

都是狠人的博客

06-28

1876

解决方案：用js动态设置为abolute，放手后再设为fixed //css代码 .fixedTopObj.abs { position: absolute; } .fixedTopObj{ position: fixed; top:0; left:0; } //JS代码 var $fto= document.querySelector('.fixedTo...

微信小程序使用position:fixed定位后，使用scroolview，当数据不足以产生滚动条时候，无法上拉刷新解决办法

fangshijun520的博客

01-22

874

简单思路是当没有滚动条的时候，开启onPullDownRefresh下拉刷新，有滚动条的时候，使用bindscrolltolower、bindscrolltoupper来进行刷新和加载数据，经测试，当scroolview产生滚动条的时候，onPullDownRefresh是无效的，只有当scroolview没有滚动条时候，才会进行生效，所以能进行解决， ...

wx小程序上拉、下拉刷新，返回顶部

黄彪博客

11-01

1253

文章参考 wx小程序页面配置 wx小程序 onPullDownRefresh wx小程序 stopPullDownRefresh onPullDownRefresh() 监听用户下拉刷新事件需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果...

小程序fixed

sinat_38728634的博客

04-01

891

问题：散客预订模块滚动容器中popup的fixed定位被父级元素的overflow:auto干扰，导致popup中的内容层级不能覆盖外部的预订按钮的层级，通过demo测试排查，发现该问题只有在小程序中存在，在PC端浏览器中是不存在的。解决：（1）滚动的容器不设置overflow：auto，按正常的文档流让内容自动撑高。（这种不会造成滑到底部时底部由于弹性底部按钮被覆盖）（2）滚动的容器设置...

用css设置小程序fixed固定底部栏适配iphonx系列底部刘海

lixiaohua66的博客

05-07

672

wxml：外面套一层 <viewclass="pagepage--with-footer"> ... //底部固定区域 <viewclass="btns"> <viewclass="signs">报名</view> </view> </view> css: .btns{ width:100%; position:fixed; left:0; bottom:0; ...

小程序开发踩坑记录（五）——模拟实现底部tabbar和下拉刷新功能（解决安卓端打开下拉刷新功能后fixed元素失效问题）

王小烦的博客

04-29

4215

①问题描述因为上一篇文章提到的问题，小程序目前（2019年4月29日）暂时无法实现在打开下拉刷新功能的前提下，自己使用position:fixed制作底部tabbar标签导航栏，在下拉刷新时，页面上所有的fixed元素也都会失去fixed效果，会跟随页面一起下拉。为解决这个问题，笔者使用scroll-view组件自制下拉刷新功能，使用position:fixed自制底部tabbar，基本解决（...

微信小程序使用fixed布局

侞婼冇罪

06-12

8701

textarea微信目前是用原生写的，无法使用fixed遮盖 input框架，使用fixed需要加上z-index：2才能遮盖住

解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能...

weixin_33968104的博客

06-04

167

解决ios、微信移动端的position: fixed; 支持性不好的问题　　在chrome中的多个部分使用了position: fixed之后，都可以正常的布局，但是放在微信上却出现了不能正常显示的问题（第一个问题）。　　并且使用了postion: fixed; 的一个种类名称栏在微信下下滑不了，而body是可以的，确实让人很郁闷（第二个问题）。　　对于第二个问题，我们可以采取的方...