1)将 scroll-view 切换到 custom 模式 2)采用 grid-view 类型为 masonry 作为直接子节点 3)在 grid-view 中直接编写列表 2、吸顶布局容器sticky-section / sticky-header 使用sticky 布局仅需 4 步即可快速实现交错吸顶的功能: 1)将 scroll-view 切换到 custom 模式 2)采用 sticky-section 作为 scroll-view...
*/onShow:function(){wx.createSelectorQuery().select('#navfix').boundingClientRect(rect=>{// console.log(rect)this.setData({topheight:rect.top,height:rect.height})}).exec();} 2、CSS3新属性position:sticky 在所需要定位的元素节点的css中加上position:sticky;top:0; top指的是当前元素节点定位...
请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/...
第二个子组件布局是上面一个标题,下面是scroll-view。 再画个解剖图吧…… 页面分三部分,tab,title,scroll-view。不要忘了每个部分间还有margin, 这里设置的是每个margin都是10px。 所以要计算scroll-view的高度可以得出下面公式: 代码语言:javascript 复制 scroll-view 的高度=页面可用高度-tab高度-title高度-10-...
与position: sticky 不同的是,position: sticky 很难实现列表滚动需要的交错吸顶效果,而 sticky 组件则可以帮忙开发者轻松实现交错吸顶的效果。 sticky 的使用非常简单: 将scroll-view 切换到 custom 模式 采用sticky-section 作为 scroll-view 的子元素 sticky-header 放置吸顶内容 list-view 放置列表内容 ...
由于scroll-view的scroll-into-view属性是滚动到指定id位置,所以,在列表的字母行加上id属性; 由于scroll-view的scroll-into-view属性实现了滚动到指定位置,所以减少了scrollTop的计算; 由于scroll-view的scroll-with-animation属性,实现了滚动动画过度效果; 减少了计算scrollTop的循环消耗; js代码量减少,减少this.setData...
微信小程序scroll-view未被占满时滚动的问题 当scroll-view组件的第一个直接子元素设置了margin-top时即使scroll-view只有一行也可以滚动。 解决办法: 方案一: 去掉第一个元素的margin-top,这样的缺点是第一个元素和scroll-view顶部紧贴,看着很不舒服。
tdesign-miniprogram 版本 最新版本 重现链接 No response 重现步骤 refresher-enabled未开启时吸顶正常 期望结果 No response 实际结果 No response 框架版本 No response 基础库版本 2.30.0 补充说明 No response
路径有问题，小程序只能使用相对路径访问项目内文件（绝大部分小程序端app.json所在的目录为项目根目录）...
<view style="position: sticky;top:{{navigationBarHeight + statusBarHeight + 176}}rpx;display: flex;"> <scroll-view scroll-y="true" style="height: {{leftHeight}}px;width: 170rpx;background: #F6F6F6;"> <view class="leftCategory"> ...