微信小程序中Button组件的使用示例
这篇文章主要介绍微信小程序中Button组件的使用示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
10年积累的网站设计、网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先做网站后付款的网站建设流程,更有云安免费网站建设让你可以放心的选择与我们合作。
微信小程序存在Button组件
微信小程序原生存在Button组件,而且样式也不丑,拓展属性也很多,只要去看文档,一边看一边试,还是很容易构造一个理想的按钮Button出来。微信小程序Button传送门。
但是某些时候可能也会觉得原生Button组件配置过于复杂,或者并不满足当前需求,那么就可能需要自定义一个Button组件了。
比如想要这样的效果。
拥有五种不同的颜色
拥有三种不同的大小
拥有镂空效果
可以圆角
可以禁用
可以设置图标
上代码
第一步,创建组件
首先打开编辑器,这里就打开微信开发者工具吧,然后创建一个组件,像这样
我这里用的是Vscode然后用到了less,和easyLess插件自动编译less为wxss样式。
第二步,控制结构和样式
结构中需要注意:
文字应该居中显示,所以此处可能需要使用flex布局方便些
需要预留图标位置,没有设置时,则不显示
需要设置背景颜色控制选项
注意结构和样式对应即可
.pm-button { border-radius: 0; font-weight: normal; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; white-space: nowrap; } .pm-button:not([size='mini']) { width: 0; } .pm-button--normal { width: 80px !important; height: 40px; font-size: 16px; } .pm-button--normal.pm-button--round { border-radius: 40px; } .pm-button--small { width: 60px !important; height: 30px; font-size: 14px; } .pm-button--small.pm-button--round { border-radius: 30px; } .pm-button--mini { width: 40px !important; height: 20px; font-size: 12px; } .pm-button--mini.pm-button--round { border-radius: 20px; } .pm-button--primary { background-color: #1989fa; border: 1px solid #1989fa; color: white; } .pm-button--primary.pm-button--plain { color: #1989fa; } .pm-button--success { background-color: #07c160; border: 1px solid #07c160; color: white; } .pm-button--success.pm-button--plain { color: #07c160; } .pm-button--danger { background-color: #ee0a24; border: 1px solid #ee0a24; color: white; } .pm-button--danger.pm-button--plain { color: #ee0a24; } .pm-button--warning { background-color: #ff976a; border: 1px solid #ff976a; color: white; } .pm-button--warning.pm-button--plain { color: #ff976a; } .pm-button--default { background-color: #ffffff; border: 1px solid #ebedf0; color: black; } .pm-button--primary:active, .pm-button--success:active, .pm-button--danger:active, .pm-button--warning:active, .pm-button--default:active { opacity: 0.8; } .pm-button--default:active { background-color: #ebedf0; } .pm-button--plain { background-color: transparent; } .pm-button--plain:active { opacity: 1!important; background-color: #ebedf0; } .pm-button--disabled { opacity: 0.6; } .pm-button--disabled:active { opacity: 0.6 !important; } .pm-button--disabled.pm-button--plain:active, .pm-button--disabled.pm-button--default:active { background-color: transparent; }
第三步,逻辑处理
Component({ /** * 组件的属性列表 */ properties: { size: { type: String, value: 'normal' }, type: { type: String, value: 'primary' }, plain: Boolean, disabled: Boolean, round: Boolean, cStyle: String, icon: String, iconColor: String, iconSize: String }, /** * 组件的方法列表 */ methods: { clickHandler() { !this.data.disabled && this.triggerEvent('click', {}) } } })
以上是“微信小程序中Button组件的使用示例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
分享题目:微信小程序中Button组件的使用示例
文章路径:http://azwzsj.com/article/jhichh.html