- swiper 嵌套自定义组件,真机渲染有问题?
问题描述: 当用 swiper 嵌套一个自定义列表组件,组件更新数据时,数据渲染有问题。仅真机上能复现,开发者工具正常。 真机型号:iPhone12 mini 版本 14.6 微信版本:8.0.7 详细描述: 当自定义一个组件 base-info-list ,并且嵌入到 swiper-item 中,更新数据后,发现数据无法正常渲染。其中内嵌自定义组件 base-info-list 中用到了或语句 {{ xx || '暂无' }},在 vConsole 中能看到正常的数据,并且里面是没有“暂无”二字的(图1),但是页面上看到的却是“暂无"。个人认为数据实际上是更新了,只是被“暂无”两个字遮挡住了,也就是实际结果和“暂无”是同时存在的。因为保持其他变量不变,只是通过调整 swiper 外部同级自定义组件 detail-card 组件的 margin-bottom 可以让“暂无”两个字消失,而出现我们需要的数据。并且通过调整这个 margin-bottom 可以让实际结果和“暂无”各占一半(图2红框内),它们是在同一个最小的 dom 里。 预期结果: 更新数据后,页面上不应该看到“暂无”。 图1: [图片] 图2: [图片] 贴一下关键代码 页面代码<!-- 页面: index.wxml --> <detail-card detail="{{ detail }}" /> <swiper> <swiper-item> <base-info-list base-info-list="{{ baseInfo }}" /> </swiper-item> </swiper> const app = getApp(); Page({ data: { baseInfo: [ { title: "标题1", key: "title1", content: "" }, { title: "标题2", key: "title2", content: "" }, ], detail: {}, }, onLoad() { const contentList = [1, 2]; const baseInfo = [ { title: "标题1", key: "title1", content: "1111" }, { title: "标题2", key: "title2", content: "22222" }, ]; setTimeout(() => { this.setData({ baseInfo, detail: { contentList }, }); }, 1000); }, }); 自定义组件 base-info-list 代码 <!-- base-info-list/index.wxml --> <view class="base-info-list"> <view wx:for="{{ baseInfoList }}" wx:key="key" class="base-info-item"> <view class="base-info-item-title"> {{ item.title }} </view> <view class="base-info-item-content"> {{ item.content || "暂无" }} </view> </view> </view> /* base-info-list/index.wxss */ .base-info-list .base-info-item-content { margin-top: 10rpx; color: #333; font-size: 30rpx; line-height: 40rpx; border: 1rpx solid red; } 完整代码见下面: bug demo: https://developers.weixin.qq.com/s/KSXfIYmL7hqw 其中 settimeout 模拟从后端获取更新数据。
2021-06-11 - 多个 image 组件排列中间有缝隙
当多个 image 组件排列在一起,已经对 image 组件使用了 display: block; 消除原本的缝隙,但是图片和图片之间还是存在很细小的缝隙 目前仅安卓机和开发者工具能稳定复现,iphone 无法复现。 经观察当图片本身被缩放出来的高度存在小数点时,且小数点大于0.5的情况下,则会出现缝隙。 比如原图的尺寸是 1125 × 443 px,经过缩放,宽度缩小到 375 px,则高度缩小到 147.667px,则会出现间隙。如果高度正好被缩放到整数或者小数点位小于0.5,则不会出现间隙。 希望官方能解决下,感谢! [图片]
2020-07-21 - input 组件中 bindinput 方法和页面中的方法同名时,会导致页面中同名方法触发时机有问题
问题描述: input 组件中的 bindinput 方法如果和页面中的方法同名的话,则在对 input 的 value 进行赋值时,页面中的同名方法会被触发。具体可查看 demo 代码 预期: 对 input 的 value 赋值时,不会触发 input 组件 bindinput 方法(目前是这样没问题),更不会触发 index/xx 页面中和 input 组件 bindinpunt 方法同名的方法(这里有问题) 目前仅以下指定安卓机可复现,ios 和开发者工具都没问题。 复现机型: smartisan os v6.1.4,安卓版本 7.1.1 复现流程: 点击【赋值搜索按钮】此时 input 输入框内的值为被赋为“搜索”,然后【清空赋值】,此处“搜索”被清空点击输入框内,使得 input 聚焦,然后再次点击【赋值搜索按钮】,会发现输入框内无“搜索”字样,(因为触发了页面中的同名方法)将 index/xx 中的 searchInputChangeHandler (和 input 组件的 bindinput 方法同名)换成任意的其它名称,使其名称和 input 的 bindinput 方法名不一致再重复上述 1,2 操作,就不会再出现 2 所述问题了
2020-05-12 - video 视频组件安卓端拖动进度条和全屏的问题
- 当前 Bug 的表现(可附上截图)以下问题都是安卓上才出现,iOS 是正常的。 安卓端在视频播放期间拖动进度条时会触发 bindplay 事件 安卓端使用 [代码]requestFullScreen[代码] 时,如果已经是全屏了,则会默认退出全屏并出现卡住的现象(通常要等上一阵子才能恢复) - 预期表现 拖动进度条不会触发 bindplay 事件 使用 requestFullScreen 时如果已经全屏,则不改变全屏状态,只有非全屏时才会去打开全屏。 - 提供一个最简复现 Demo [代码]const app = getApp()[代码] [代码]Page({[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]videoId: [代码][代码]'test'[代码][代码],[代码][代码] [代码][代码]videoUrl: [代码][代码]'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'[代码][代码],[代码][代码] [代码][代码]},[代码][代码] [代码][代码]// 全屏状态变化[代码][代码] [代码][代码]handleScreenChange(data) {[代码][代码] [代码][代码]const { detail: { fullScreen = [代码][代码]false[代码] [代码]} } = data;[代码][代码] [代码][代码]console.log([代码][代码]'是否全屏'[代码][代码], fullScreen);[代码][代码] [代码][代码]},[代码][代码] [代码][代码]// 点击播放[代码][代码] [代码][代码]handleVideoPlay() {[代码][代码] [代码][代码]console.log([代码][代码]'开始播放'[代码][代码]);[代码][代码] [代码][代码]setTimeout(() => {[代码][代码] [代码][代码]console.log([代码][代码]'进入全屏'[代码][代码]);[代码][代码] [代码][代码]this[代码][代码].videoContext.requestFullScreen();[代码][代码] [代码][代码]}, 2000);[代码][代码] [代码][代码]},[代码][代码] [代码][代码]onReady() {[代码][代码] [代码][代码]this[代码][代码].videoContext = wx.createVideoContext([代码][代码]this[代码][代码].data.videoId)[代码][代码] [代码][代码]},[代码][代码]})[代码][代码]<[代码][代码]video[代码] [代码]id[代码][代码]=[代码][代码]"{{ videoId }}"[代码][代码] [代码][代码]src[代码][代码]=[代码][代码]"{{ videoUrl }}"[代码][代码] [代码][代码]direction[代码][代码]=[代码][代码]"{{ 0 }}"[代码][代码] [代码][代码]bindplay[代码][代码]=[代码][代码]"handleVideoPlay"[代码][代码] [代码][代码]bindfullscreenchange[代码][代码]=[代码][代码]"handleScreenChange"[代码][代码] [代码][代码]binderror[代码][代码]=[代码][代码]"handleError"[代码][代码]>[代码][代码]</[代码][代码]video[代码][代码]>[代码]
2019-07-11 - iphonex 同层渲染失效
- 当前 Bug 的表现(可附上截图) 视频盖住了弹层 - 预期表现 video 组件支持同层渲染,理论上会被弹层覆盖,但是实际却覆盖住了弹层。 - 复现路径 确保手机系统版本是12.2,因为 iphoneX 在系统版本号为 12.1 的时候是正常的。 - 提供一个最简复现 Demo index.wxml [代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"page-body"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]video[代码] [代码]id[代码][代码]=[代码][代码]"myVideo"[代码] [代码]src[代码][代码]=[代码][代码]"http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"[代码] [代码]binderror[代码][代码]=[代码][代码]"videoErrorCallback"[代码] [代码]danmu-list[代码][代码]=[代码][代码]"{{danmuList}}"[代码] [代码]enable-danmu danmu-btn controls></[代码][代码]video[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"test-image"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]image[代码] [代码]class[代码][代码]=[代码][代码]"play-buttom"[代码] [代码]src[代码][代码]=[代码][代码]"http://img.redocn.com/sheji/20150104/2015nianyangfuzifutie_3803971.jpg"[代码][代码]></[代码][代码]image[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码]index.wxss [代码].test-image {[代码][代码] [代码][代码]position[代码][代码]: [代码][代码]fixed[代码][代码];[代码][代码] [代码][代码]left[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]top[代码][代码]: [代码][代码]0[代码][代码];[代码][代码]}[代码]
2019-03-27