在微信小程序中,scroll-view中使用position:fixed定位的元素会失效,不再相对于根元素来定位,而是相对scroll-view定位。 经过查证,是由于scroll-view中的 refresherEnabled 导致的fixed失效。 解决 前提:页面有下拉刷新需求,并且其中的fixed定位Modal元素不好提取到父组件中控制展示和隐藏。 解决过程 首先尝试了使用view替...
<viewclass="main"><viewclass="navbar navbar-fixed"hidden="{{scrollTop<=initTop}}">我是头部fixed元素</view><scroll-viewscroll-y="{{true}}"bindscroll="handleScroll"style="height:100%;"><view><view>这里是一大段test文字,用于占位</view><viewid="navbar"class="weui-navbar navbar-fixed"...
001.png 如图微信小程序中 scroll-view组件外div加display:flxed后, scroll-view组件滚动失效 github项目地址:https://github.com/fancaixia/wx-scroll-view 解决办法: scroll-view宽度为屏幕宽度, 子元素view.cont设置overflow:auto;内容超出屏幕会出滚动条,然后便可以拖动了, 最外层header设置overflow-y: hidden;...
如图,上方nav是scroll-view的方式横向滚动,当给scroll-view的外出div加position: fixed; 定位时,scroll-view滚动就失效了。不知道大家有没有这种滚动的样例,固定在顶部,并且顶部nav可以横向滚动?谢谢 对应的wxml <template name="search-fixed"> <view class="fixed-container"> <view class="nav-container"> <sc...
方案1:整个页面滚动,滚动至某个位置fixed图中“顶部box2”,分页页面触底加载 方案2:页面高度为屏幕高度,商品部分使用scroll-view,scroll-view初始高度为屏幕高度-顶部高度,只滚动scroll-view。 思路说明: 1 将整个页面分为上下两部分,整个页面高度100vh(原因1:scroll-view高度需要固定高度;原因2:出现两个滚动条) ...
微信小程序 ios禁止拉动屏幕 微信小程序滑不动,微信小程序爬坑记录开发微信小程序近两个月的小白,简单记录一下记忆比较深刻的坑一固定定位fixedscroll-view下不能通过fixed进行固定定位,无法到达页面底部,使用view即可。二canvas业务中需要实现这样一个效果vantWeapp中
小程序Bugscroll-view微信iOS客户端8.0.02.15.0 在安卓端微信版本8.0.0和开发工具Stable 1.03.2101150的效果如下图,refresher-enabled属性值为true时fixed弹窗定位变为了相对于scroll-view的定位,而且会随scroll-view内容滚动 在iOS客户端微信版本8.0.2的效果如下图,fixed弹窗内容被scroll-view截取 ...
当需要阻止滑动的弹窗显示时添加no-scroll,弹窗关闭去掉no-scroll即可。 此种方式的缺点是当弹窗显示增加no-scrll后弹窗下面的页面会回到顶部。 场景三: WXML 将整个底层页面使用 scroll-view 包裹起来,设置 scroll-y 当显示弹出层的时候为 true, 闭关弹出层的时候为 false ...
使用fixed解决 解决方法(忽略第二种,只是记录自己的愚蠢时刻): 在没有特殊样式的情况下可以直接使用sticky-section,超级好用 https://developers.weixin.qq.com/miniprogram/dev/component/sticky-section.html 在scroll-view的bindscroll方法里,当scrollTop超出一定值时,让想要吸顶的元素的position,从sticky变成fixed(不...