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;,防止文字溢出