收藏
评论

button组件遇到的那些坑


这是我第一次独立开发小程序,也是第一次使用云开发,也是第一次成功上线。有激动也有感慨,感慨就是许多微信组件实在是不大好用,难以定制,需要你足够了解css知识,而这对于软件开发者来说确实不是最擅长的。下面就单独讲讲button这个组件所遇到的坑吧。

官方文档告诉我们button的type属性有三种:default,warn和primary,默认情况下就是default。好,现在要设置button大小,倒圆角很简单,就是常规操作,但是如果想修改button的字体颜色和背景颜色,直接用静态类选择器class就不管用了,发现怎么设置都无效。这时候该怎么办呢,有两种办法,一种是直接删除掉元素内的 type=“”代码块,另一种就是改用style内联动态样式设置颜色,这时候type=“”就不管用了,不再是红绿灰三种颜色了,可以任由你发挥了。但是!但是!但是!重点来了,一旦你把type属性给覆盖掉了,那么连带button的一些其他效果也自动消失了!比如按压变灰的效果。按压效果是很重要的用户体验呐!怎么办呢,官方文档告诉我们用hover-class来设置,但是可气的是并没有告诉我们可以设置哪些值,唯一一个默认值是button-hover,但是我怎么知道这个button-hover是真么效果呢,也没说明。没办法,只能硬着头皮试试咯,于是我就在button元素里添加了hover-class=“button-hover”,不管用,然后试着放到css文件中,同样无效。这个问题让我纠结了很久,网上也没有找到解决的办法,最后实在没辙了都差点决定不用这个按压效果了。最后,还是在我的强迫症驱动下,反复的各种尝试,终于!出于巧合的被我发现了解决的办法,那就是直接在css文件里声明 .button-hover{  },可以在里面设置style内联样式里没有的属性,比如透明度,背景,颜色等。至于为什么要求style没有的呢,因为有可能会被覆盖掉。

好了,关于button组件的坑基本填完了,现在基本可以实现自由定制了!下面分享一下我开发的小程序吧:


另外附上一个微信交流群,欢迎小程序爱好者加入,打广告的就别加了,免得我直接踢哈哈。



最后一次编辑于  2018-12-19
赞 0
收藏

3 个评论

  • 诗·昂
    诗·昂
    2018-12-19

    建议你好好学一学css3, 小程序的hover-class就是在点击时的样式, 你要在样式表里自定义.

    另外button有一个border样式的伪类

    button::after {

        border: none;

    }

    自定义的时候记得去掉

    2018-12-19
    赞同 2
    回复 2
    • Dyson_Open
      Dyson_Open
      2018-12-20

      好的,我会去学学的,您使用的那个教程?我在菜鸟和w3cschool上看的都很浅,不够详细

      2018-12-20
      回复
    • 诗·昂
      诗·昂
      2018-12-20回复Dyson_Open

      没什么好法子,只能多写,遇见问题多百度,写的好的解决办法都会贴上很多参考链接,多学多看

      2018-12-20
      回复
  • MCC
    MCC
    2018-12-20

    能不用button实现就不用,普通的点击事件可以用view标签啊,css样式写的像button就可以了

    2018-12-20
    赞同
    回复 7
    • Dyson_Open
      Dyson_Open
      2018-12-20

      看来是过来人

      2018-12-20
      回复
    • MCC
      MCC
      2018-12-20回复Dyson_Open

      哈哈哈,我只有在formid,getuserinfo,getPhonenumber,opensetting , 才用button,其余都是view

      2018-12-20
      回复
    • Dyson_Open
      Dyson_Open
      2018-12-20回复MCC

      像hover,disabled都能达到一样的效果吗?如果可以,我也弃用button 了


      2018-12-20
      回复
    • MCC
      MCC
      2018-12-20回复Dyson_Open

      disabled,你可以在bindtap的里面加层判断不可以就return可以就执行,hover,也可以js去做,在css做三目运算符加个hover的class,点击的时候把一个值状态更改,再写个定时器50毫秒后变回来,就实现hover效果了。

      2018-12-20
      回复
    • Dyson_Open
      Dyson_Open
      2018-12-20回复MCC

      听你这么一说,我感觉还是继续用我的button好了😅

      2018-12-20
      回复
    查看更多(2)
  • Dyson_Open
    Dyson_Open
    2018-12-20

    最后一点有点小题大做了,hover-class其实就类似于静态样式class,用法也一样,直接在样式表里设置就好了,类选择器的名称可以自己定义,不一定就是button-hover,这个官方给的默认值其实仅仅是个名称而已。css确实需要补补了。。。

    2018-12-20
    赞同
    回复