这可能是小程序的一个BUG。我也遇到过这种情形,简化问题,可以描述如下: 假设有页面如下: [代码]<[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]button[代码] [代码]bind:tap[代码][代码]=[代码][代码]'FuncTest'[代码] [代码]style[代码][代码]=[代码][代码]'position:static;background-color:green;'[代码][代码]>TEST</[代码][代码]button[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码] 其中FuncTest定义如下: [代码]FuncTest:[代码][代码]function[代码][代码](e){[代码][代码] [代码][代码]console.log([代码][代码]'click test'[代码][代码]);[代码][代码]}[代码] 运行效果如图 [图片] 预期的结果是点击TEST按钮时,日志输出click test 但测试会发现,无论点屏幕哪里,即便在TEST按钮范围之外,日志也会输出click test。也就是说,此时的按钮覆盖到整个界面了。 暂时没有解决的方法,只能是不使用position:static 另外,查阅了w3school的文档,其中对于position的取值解释如下: 可能的值值描述absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。inherit规定应该从父元素继承 position 属性的值。 注意到static本就是position的默认值。但是在小程序中却会因为加上它而外观和行为发生变化。可见在小程序中,static不是默认值。小程序并没有遵循标准CSS的定义。
小程序position设置为static后。影响了全局[图片] 只是更改了提交作业与查看的position为static。反而影响了整个页面多了个边框?为什么
2018-07-20最后发现,在确认按钮的CSS中,有一条: [代码]btn-choose{[代码] [代码] [代码][代码]...[代码] [代码] [代码][代码][代码][代码]position[代码][代码]:[代码][代码]static[代码][代码];[代码] [代码]}[代码]将position去掉即可。但外观会有一点小影响。 为何加上static之后,按钮会劫持整个界面的tap事件,这可能是小程序和标准HTML的差异。因为static本就是position的默认选项。但小程序中,static显然不是。
这是自定义组件的bug吗我想创建一个列表,用于展示一些数据。 每一个列表项的内容有(标题,时间,描述)。其中时间可被修改。 基于这样的需求,我想自定义一个组件。 record_card>/record_card> 它内部实现了我需要的标签: [代码]<[代码][代码]record_card[代码][代码]>[代码][代码] <[代码][代码]view[代码][代码]>title[代码]view[代码][代码]>[代码][代码][代码] [代码][代码][代码] <[代码][代码]view[代码][代码]>tip[代码]view[代码][代码]>[代码][代码][代码][代码][代码] [代码][代码][代码][代码][代码] <[代码][代码]view[代码][代码]>time[代码]view[代码][代码]>[代码][代码][代码][代码][代码][代码] [代码][代码][代码][代码][代码][代码]record_card[代码][代码]>[代码][代码][代码][代码] 那么我在index页面中,就可以这样使用: [代码]<[代码][代码]block[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{infos}}"[代码] [代码]wx:for-item[代码][代码]=[代码][代码]"info"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]record_card[代码] [代码]info[代码][代码]=[代码][代码]'{{info}}'[代码][代码]>[代码]record_card[代码][代码]>[代码][代码][代码][代码] [代码][代码][代码]block[代码][代码]>[代码][代码][代码]其中infos是数据。效果如下: [图片] 因为时间可以修改,所以record_card增加了修改功能 [代码]<[代码][代码]record_card[代码][代码]>[代码][代码] <[代码][代码]view[代码] [代码]style[代码][代码]=[代码][代码]"display:block;默认是可见的"[代码][代码]>[代码][代码] <[代码][代码]view[代码][代码]>title[代码]view[代码][代码]>[代码][代码][代码] [代码][代码][代码] <[代码][代码]view[代码][代码]>tip[代码]view[代码][代码]>[代码][代码][代码][代码][代码] [代码][代码][代码][代码][代码] <[代码][代码]view[代码] [代码]bind:tap[代码][代码]=[代码][代码]'showTimePicker'[代码][代码]>time[代码]view[代码][代码]>[代码][代码][代码][代码][代码][代码] [代码][代码][代码][代码][代码] [代码]view[代码][代码]>[代码][代码][代码][代码][代码][代码] [代码][代码][代码][代码][代码] <[代码][代码]view[代码] [代码]style[代码][代码]=[代码][代码]"display:none;默认是隐藏的"[代码][代码]>[代码][代码][代码][代码][代码] [代码][代码][代码][代码][代码] 时间选择控件[代码][代码][代码][代码][代码] [代码][代码][代码][代码][代码] <[代码][代码]button bind:tap='FunCancel'[代码][代码]>取消[代码]button[代码][代码]>[代码][代码][代码][代码][代码][代码] [代码][代码][代码][代码][代码] <[代码][代码]button bind:tap='FunOK'[代码][代码]>确认[代码]button[代码][代码]>[代码][代码][代码][代码][代码][代码] [代码][代码][代码][代码][代码] [代码]view[代码][代码]>[代码][代码][代码][代码][代码][代码] [代码][代码][代码][代码][代码][代码]record_card[代码][代码]>[代码][代码][代码][代码]效果如下: [图片] 现在问题在于:当修改时间界面出来后,确定按钮的tap事件会劫持整个页面,无论点哪里,都会执行FunOK,而时间选择控件点不了。 如果将: [代码]<[代码][代码]button[代码] [代码]bind:tap[代码][代码]=[代码][代码]'FunCancel'[代码][代码]>取消[代码]button[代码][代码]>[代码][代码][代码][代码] [代码] [代码][代码][代码]<[代码][代码]button[代码] [代码]bind:tap[代码][代码]=[代码][代码]'FunOK'[代码][代码]>确认[代码]button[代码][代码]>[代码][代码][代码][代码][代码][代码]顺序改为[代码][代码][代码][代码][代码][代码] [代码][代码]<[代码][代码]button[代码] [代码]bind:tap[代码][代码]=[代码][代码]'FunOK'[代码][代码]>确认[代码]button[代码][代码]>[代码][代码][代码][代码][代码][代码][代码]<[代码][代码]button[代码] [代码]bind:tap[代码][代码]=[代码][代码]'FunCancel'[代码][代码]>取消[代码]button[代码][代码]>[代码][代码][代码][代码]那么取消按钮的tap事件FunCancel就会劫持整个页面的tap。 想请问下,这是怎么回事? 具体现象可以运行我提交的代码片段看看。
2018-07-16