加载中 ...
首页 > 新闻资讯 > 小程序 正文

微信小程序button组件自定义样式示例教程

2019-07-31 09:52:52 来源:沈阳小程序开发 作者:沈阳软件开发

在开发小程序时,我们可以将页面共享按钮变成一个漂亮的图片按钮,有很多样式,下面将向您介绍小程序button组件的自定义样式示例教程。

21708-1P42315222b94.png

背景颜色

Wxml代码

Wxss代码

.btn {

宽度: 90%;

保证金顶部: 30rpx;

背景色:#FFCC00;

颜色: #FFF;

}

background-color属性是修改背景颜色,颜色是修改字体颜色,这里注意:如果组件写入type='.',背景颜色将无效,例如以下代码:

按钮到边框

小程序中提供的按钮组件默认具有边框。要删除按钮边框,只需将其添加到wxss样式代码中:

在{

之后.btn:

边界: 0;

}

单击按钮时的背景颜色

Wxml代码

Wxss代码

.btn_hover {

背景颜色:粉红色;

}

这里,悬停类是焦点,如小程序文档中所述:

类型:字符串

默认值:按钮悬停

描述:指定按下按钮的样式类。当hover-class='none'时,没有单击效果。

HiShop小程序工具提供多种类型的商城/商店小程序制作,可视化编辑1秒,在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面,你可以看到你得到的东西,你只需要艺术家来制作一个漂亮的商场。

更多小程序开发案例,全部位于:http://www.hvihi.com/xiaocx/kaifa.html

< 汇海(www.hvihi.com)是国内知名的商城系统和商城网站建设提供商,其中汇海技术小程序系统提供小程序商城开发,小程序配送系统,微分配系统,商城系统,电子商务网站建设, 微信发行系统,小程序商城及其他多端商场和电子商务行业解决方案>

确认:这个文件和图像源网络编辑器的网站部分,如果有侵权及时通信删除。 汇海hvihi.com网站原创文章,请注明出处。

“沈阳软件公司”的新闻页面文章、图片、音频、视频等稿件均为自媒体人、第三方机构发布或转载。如稿件涉及版权等问题,请与

我们联系删除或处理,客服QQ:55506560,稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同

其观点或证实其内容的真实性。