微信小程序 踩坑记录

1、单个页面需要增加下拉刷新功能,在对应页面的.json文件里面已设置:"enablePullDownRefresh": true ,但是页面的下拉刷新功能失效,没有触发页面的onPullDownRefresh函数。

解决方案:在项目app.json文件中的pages里确认需要下拉刷新的页面是否在里面,如果没有,虽然能正常跳转,但是页面没有注册,会导致下拉刷新失效,补充添加即可。

2、scroll-view开启自定义下拉刷新,会导致组件内的position: fixed失效

表现:使用van-sticky想要滚动到相应位置进行吸顶,注意开启下拉刷新之后,吸顶失效,未开启下拉刷新,吸顶正常
原因: scroll-view开启自定义下拉刷新之后,用到了transform,会导致position:fixed降级为absolute,所以sticky会失效

解决:

方案1:view替换scroll-view,开启view的竖向滚动,用页面的下拉刷新实现enablePullDownRefresh:true,但使用体验上感觉不如scroll-view自然流畅

方案2(推荐):在scroll-view的外层创建个A组件(复制一份自定义fixed组件,以下称为B组件),首先给A组件隐藏,当滚动到相应位置时,给A组件显示即可

方案3:scroll-view(以下简称A)嵌套scroll-view(以下简称B),外层的A实现悬浮吸顶,内层的B实现下拉刷新和上拉加载,但使用下来,滑动时scroll-view联动有抖动,体验不流畅。
另外官方有推荐使用scroll-view嵌套模式,联动效果比较好,但有最低基础库要求>=3.2.0

3、微信小程序,实现图文混排,图标和文字水平对齐,而且文字超过一行后自动换行

将图片设置为 float: left;float: right; 后,周围的文字会自动换行并填充在另一侧。
文字设置属性:overflow: hidden;,防止文字溢出

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容