美文网首页
小程序采坑

小程序采坑

作者: 泪滴在琴上 | 来源:发表于2021-10-19 16:14 被阅读0次

    全局样式选择器*被禁用

    *{
      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>
    

    相关文章

      网友评论

          本文标题:小程序采坑

          本文链接:https://www.haomeiwen.com/subject/ugqhmktx.html