微信小程序button怎样自定义其样式（字体、长宽高、背景颜色）

最新推荐文章于 2025-03-24 19:00:53 发布
最新推荐文章于 2025-03-24 19:00:53 发布
阅读量1.9w 收藏 49
点赞数 14
分类专栏： 基础开发 初学者 文章标签： 小程序 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_52658156/article/details/118724239
版权

记录一下我做微信小程序以来，button组件无法自定义样式的问题和其解决方法。小程序的button组件有其默认的样式，它默认的样式有时候不适合我们项目开发，所以我们需要自定义其样式。（源代码在文章结尾)

wxss-----button修改样式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

wxss-----calss修改样式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
用class修饰与button直接修饰的主要区别为button直接修饰修改不了button组件的宽，能修改高；用class修饰则可以修改其宽高。

wxss代码
testBt:not([size='mini']){ display: flex; align-items: center; justify-content: center; background-color: red; margin-top: 15rpx; padding: 0rpx; width:200rpx; height:70rpx; border-radius: 40rpx; color: white; }.

本人自己做了一个完整的图文分享、点赞、收藏云开发小程序，可以用来做毕业设计、图文分享项目，操作简单，利用腾讯免费赠送的云开发空间就可以完成所有操作，节省成本、方便快捷，当天就可以上线！
链接：https://download.youkuaiyun.com/download/weixin_52658156/20238876

【微信小程序】表单组件-button按钮组件
墨夶的博客
11-23 1682
通过设置属性，可以自定义按钮点击时的样式。如果需要完全自定义点击态样式，可以设置并使用 CSS 控制点击态。-- index.wxml --> < button type = " primary " hover-class = " my-hover-class " > 自定义点击态 -- index.wxml --> < button type = " primary " hover-class = " my-hover-class " > 自定义点击态
微信小程序中Button组件的属性值和用法详解
suqi_123123的博客
05-25 3469
简要介绍Button组件在小程序中的作用和重要性，以及为什么开发者需要深入了解其属性值和用法。size：设置按钮尺寸大小。type：设置按钮样式类型。plain：设置按钮是否镂空。disabled：设置按钮是否禁用。open-type：设置按钮的开放能力。hover-class：设置按钮按下后的样式类。form-type：设置按钮在表单中的功能类型。lang：设置开放能力的语言类型。hover-stop-propagation：设置是否阻止事件冒泡。
微信小程序自定义checkbox/button
weixin_43847971的博客
07-09 432
自定义checkbox或button，任意设置图片和文字，点击改变背景和文字，有抖动效果。如下图的接收、HEX、清空、更多。使用方法：通过设置按下前后的图片，显示不同的效果。
微信小程序分享按钮默认样式去除
haotian125j的博客
03-24 387
* 水平居中 *//* 重置行高 */display: flex;/* 保持 flex 布局 */align-items: center;/* 垂直居中 */display: none;/* 隐藏默认的点击效果 */background: none;/* 清除背景 */border: none;/* 清除边框 */padding: 0;/* 清除内边距 */margin: 0;/* 清除外边距 *//* 清除按钮的点击效果 *//* 清除按钮默认样式 */
微信小程序 button组件自定义样式
php菜鸟技术天地
06-13 10000
背景颜色wxml代码&lt;button class='btn' bindtap='sumbit' &gt;确定&lt;/button&gt; wxss代码.btn { width: 90%; margin-top: 30rpx; background-color: #FFCC00; color: #FFF; } background-color属性是修改背景颜色的，color是修...
小程序上设置button样式
热门推荐
hh3167253066的博客
02-18 1万+
<button>确定</button> 此时，各项值均为默认值，效果如下：有边框以及圆角 设置其css如下：背景颜色background-color文字颜色color,设置type为primary是背景色为微信绿，无法设置背景颜色 .btn1 { width: 80%; margin-top: 20rpx; background-color: beige; color: white; } 修改圆角： .btn1 { width: 80%; margin
微信小程序button组件自定义样式
03-29
背景颜色 wxml代码   <button class='btn' bindtap='sumbit' >确定</button> wxss代码   .btn { width: 90%; margin-top: 30rpx; background-color: #FFCC00; color: #FFF; } background-color属性是修改背景颜色的，color是修改字体颜色的，这里注意：如果组件里面写 type='....'，修改背景颜色会无效，例如以下代码：   <!--修改背景颜色无效--> <button class='btn' bindtap='sumbit' type='pr
微信小程序 button样式 自定义 修改
sinat_33384251的博客
10-31 3485
无边框 自定义背景色 自定义高宽 自定义字体颜色 <button class="official" open-type="feedback">意见反馈</button> css .official{ width: 200rpx; height: 200rpx; margin-top: 20rpx; background-color: white; color: #; border-radius: 0rpx; display: flex; flex-d
微信小程序 button 的样式设置为图片的方法
10-15
最后，对于微信小程序button样式设置为图片的所有这些方法，在实现时都需要对wxml、wxss和可能的js代码进行相应的调整。开发者应该结合具体需求和场景选择最合适的实现方式，以确保最终用户界面的可用性和美观性。...
微信小程序--自定义选择颜色（组件）
07-29
1、微信小程序、颜色、组件、可自定义选择 2、该资源科用于用户自定义选择喜欢的颜色 3、已经封装成组件，可以直接调用即可 4、成功运用于网上用户，体验效果好 5、想要的小伙伴可以直接拿去使用，方便快捷高效的...
微信小程序 button样式设置为图片的方法
01-19
下面通过多种方法给大家介绍微信小程序 button 的样式设置为图片，具体内容如下所示： 方法一：button 与 image 重叠 将button设为 opacity:0 然后定位放在那副图片的上边。 方法二：background-image background-...
微信小程序之callout自定义气泡
03-29
一脚下去差点没从坑里爬起来，然后由于某个原因，去研究了 微信小程序里面地图 callout 这个属性 callout呢，是在标记的点上面显示 一个 气泡，作为提示用 最后展示下 效果 可以展示 顶部气泡以及监听被点击 (此...
微信小程序button 修改样式
03-29
项目需求，登陆界面的button需要使用橙色的bg，而在输入手机号码的时候，确认button 是disabled的。而默认的样式是绿色的，而直接类选择器设置样式，是没有效果的，在群友的帮助下，在button 里直接设置style就可以了。具体效果，直接看图吧。 效果是这样：  (此图片来源于网络，如有侵权，请联系删除! )   代码： wxss： 登录btn的效果需要在手机号码没有输入正确的情况下设置不可用状态。而默认的是绿色。解决方法主要就是在style里直接设置bg-color，而能实现透明度就是设置opacity=0.4，在验证手机号码正确以后在将opacity设置为1，即不透明。 注册
学习笔记——微信小程序button组件
m0_63309256的博客
03-08 1369
1、type 属性来配置按钮的基本显示样式 ，可以是 default、primary、warn。2、plain 属性默认false ，表示按钮背景填充，为true时，背景不填充，只有边框文字。3、size 用来配置按钮的大小 可取值为 mini、default。
微信小程序中原生button 样式的覆盖
阿乐的博客
06-29 610
但是 原生的小程序button 放那里又太丑了 所以现在 需要覆盖原生的button 样式。开发微信小程序的过程中 发现 需要使用button 的open-type。
微信小程序原生button组件使用并修改样式
黎小小的博客
07-12 3614
注意type使用得type必须和修改时选择器样式（button[type=default]）一样，才能对其修改样式，否则样式不会被修改。如果是多端适配，需要使用type为default再修改样式。想使用原生button组件，但是想使用不同样式。
微信小程序--自定义按钮样式（1）
海到无边天作岸 山登绝顶我为峰
03-27 7021
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～ 效果展示 Demo代码 WXML <vi
【微信小程序】分别对确认和取消按钮设置不同的样式，添加自定义的样式类
资深全栈开发工程师
07-20 1639
请注意，以上代码只是一个简单示例，具体样式可以根据需要进行调整。你可以根据微信小程序的样式规范和需求来定义更多的样式类和样式规则。你可以根据需要自行调整样式，例如修改背景颜色、文本颜色、边框样式和内边距等。属性来添加自定义的样式类，并在对应的样式类中定义不同的样式。给确认和取消按钮设置不同的微信小程序样式，你可以使用。在以上代码中，我们给确认按钮添加了。在以上代码中，我们分别定义了。样式类，给取消按钮添加了。
我要在微信开发者小程序里设计一个小程序，帮我写出代码，内容输入长、宽、高、厚度、面数等数据，进行数据相乘并显示最终结果，要求界面高级有美感，以淡蓝色为主题
最新发布
04-03
### 微信小程序开发：实现长宽高厚度面数计算功能 以下是基于微信小程序生命周期和淡蓝色主题的设计方案，提供了一个完整的代码示例。 #### 1. 页面结构 (WXML) 页面布局采用 `view` 和 `input` 组件构建，支持用户输入长、宽、高、厚度以及面数，并通过按钮触发计算逻辑[^1]。 ```html <view class="container"> <!-- 输入框 --> <view class="input-group"> <text>长度：</text> <input type="number" placeholder="请输入长度" bindinput="onLengthInput" /> </view> <view class="input-group"> <text>宽度：</text> <input type="number" placeholder="请输入宽度" bindinput="onWidthInput" /> </view> <view class="input-group"> <text>高度：</text> <input type="number" placeholder="请输入高度" bindinput="onHeightInput" /> </view> <view class="input-group"> <text>厚度：</text> <input type="number" placeholder="请输入厚度" bindinput="onThicknessInput" /> </view> <view class="input-group"> <text>面数：</text> <input type="number" placeholder="请输入面数" bindinput="onFaceCountInput" /> </view> <!-- 计算按钮 --> <button class="calculate-btn" bindtap="onCalculate">计算</button> <!-- 结果显示 --> <view class="result"> <text>结果：{{ result }}</text> </view> </view> ``` --- #### 2. 样式设计 (WXSS) 使用淡蓝色作为主色调，调整字体大小和间距以提升用户体验。 ```css /* 容器样式 */ .container { display: flex; flex-direction: column; align-items: center; padding: 20px; background-color: #e7f3ff; /* 淡蓝色背景 */ } /* 输入组样式 */ .input-group { margin-bottom: 15px; width: 100%; display: flex; justify-content: space-between; } .input-group text { font-size: 16px; color: #333; } .input-group input { border: 1px solid #ccc; border-radius: 5px; height: 30px; flex-grow: 1; padding-left: 8px; font-size: 14px; } /* 按钮样式 */ .calculate-btn { background-color: #00aaff; /* 蓝色按钮 */ color: white; border: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; } .calculate-btn:hover { background-color: #0095d9; } /* 结果区域样式 */ .result { margin-top: 20px; font-size: 18px; color: #00aaff; /* 高亮颜色 */ } ``` --- #### 3. 功能逻辑 (JS) 在 JavaScript 文件中定义数据绑定和事件处理函数，完成用户的交互需求。 ```javascript Page({ data: { length: 0, width: 0, height: 0, thickness: 0, faceCount: 0, result: '' }, onLengthInput(e) { this.setData({ length: parseFloat(e.detail.value) }); }, onWidthInput(e) { this.setData({ width: parseFloat(e.detail.value) }); }, onHeightInput(e) { this.setData({ height: parseFloat(e.detail.value) }); }, onThicknessInput(e) { this.setData({ thickness: parseFloat(e.detail.value) }); }, onFaceCountInput(e) { this.setData({ faceCount: parseInt(e.detail.value, 10) }); }, onCalculate() { const { length, width, height, thickness, faceCount } = this.data; if (!length || !width || !height || !thickness || !faceCount) { wx.showToast({ title: '请填写完整参数', icon: 'none' }); return; } // 假设计算公式为体积乘以面数再减去厚度影响 const volumePerFace = length * width * height / faceCount; const finalResult = Math.max(0, volumePerFace - thickness); this.setData({ result: `${finalResult.toFixed(2)} 单位³` }); } }); ``` --- #### 4. 生命周期说明 上述代码利用了微信小程序的核心生命周期方法 `Page()` 来初始化页面状态。当用户输入数值时，通过 `bindinput` 实现动态更新；点击“计算”按钮时调用自定义方法 `onCalculate` 进行业务逻辑运算。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

消寒冰冻结程序

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值