全局样式选择器*被禁用
*{
box-sizing: border-box;
}
上面的代码在编译的时候就会报错,因为小程序禁用了这类选择器。大胆猜测具体原因:这类作用范围比较广的选择器和自定义组件的样式隔离产生了冲突??
那怎么去给小程序添加全局通用样式?看来只能自己把用到的标签都手动写一遍了,还好网上有现成的代码可以贴:
view,scroll-view,swiper,swiper-item,movable-area,movable-view,cover-view,cover-image,icon,text,rich-text,progress,button,checkbox-group,checkbox,form,input,label,picker,picker-view,radio-group,radio,slider,switch,textarea,navigator,functional-page-navigator,image,video,camera,live-player,live-pusher,map,canvas,open-data,web-view,ad{
box-sizing: border-box;
}
自定义组件,bind:tap调用两次
封装基础组件时,例如button,下面的写法应当避免:
onTap(e) {
if (!this.data.disabled && !this.data.loading) {
this.triggerEvent('tap', e.detail)
}
},
<button bindtap="onTap"></button>
这样封装出来的组件,会触发两次tap事件,一次是小程序自身触发的,一次是通过triggerEvent触发。
可以换一个非小程序内置的事件类型,比如click:
onTap(e) {
if (!this.data.disabled && !this.data.loading) {
this.triggerEvent('click', e.detail)
}
},
阻止tap事件冒泡也可以解决:
<button catchtap="onTap"></button>
网友评论