logo头像
Snippet 博客主题

使用taro开发微信小程序时遇到的bug记录

在非原生滚动容器中(如 View 中设置 overflow 属性滚动)会导致 canvas 组件异常,不会随页面滚动

  • 解决方法 1:移除 canvas 组件所以父组件的 overflow 属性
  • 解决方法 2:使用 scroll-view 组件替代非原生滚动

使用原生组件 input 时,注意层级问题,及点击穿透问题

  • taro 中可使用 alwaysEmbed 强制 input 处于同层
  • 使用 cover-view 组件,渲染蒙层,解决点击穿透问题

滚动穿透

  • taro 解决方法,升级到 3.1 版本之上,使用 catchMove 属性

sticky 吸顶效果

  • top 值为 0 时,父元素必须要是 page,否则会随页面滚动

canvas 样式设为 display:none 时无法获取宽高及操作 canvas,使用如下代码修复

1
2
3
position: fixed;
top: -999999999px;
visibility: hidden;

使用 swiper 组件时,手机端可能会出现闪烁或抖动,原因是在 bindchange 的事件回调函数中使用 setData 改变 current 值,导致的,可看官方文档

  • 解决方案,参考官方提示 change 事件 source 返回值为空时,return 即可

两个页面不能共用一个公共组件,需要存在 app.scss 文件,并在 app.tsx 中引入

picker-view 组件选中项,切换慢的问题,是因为默认在滚动动画结束后触发 change 事件,可以修改 immediate-change 为 true 修改为手指松开时立即触发


对于 Map 组件,调用 includePoints(obj)时,最好使用定时器 1s 以上更新,否则安卓上会缩放失败,同时注意,不要多次重复渲染,可能会导致奇怪的 bug


封装组件时,最好不要用 id 选择器,如果 tab 页复用了有 id 选择器的组件,二级页面再服用这个组件,就会在 tab 页产生,组件明明已经卸载,方法却还能执行的 bug

  • taro 最新版好像已修复