<小程序>修改button组件的样式

最新推荐文章于 2024-02-21 14:29:09 发布
最新推荐文章于 2024-02-21 14:29:09 发布
阅读量1w 收藏
点赞数
分类专栏： 小程序 文章标签： 小程序 button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xcookies/article/details/75712334
版权

适用场景：

1.使用button的loading作为无限加载控件

2.将页内的分享按钮做成图片按钮

其实button在小程序中有不少好的样式，完全可以转换成我们想用的适用场景按钮，只需要修改css样式即可。

这需要对css样式有一定的了解，打开调试，选中上方的Wxml，可以查看到button组件的所有的样式，

可以通过html标签中定义的style来修改部分的样式，该等级最高，但不是所有的样式都可以这么改变，

可能还需要在指定页面的wxss文件中，直接修改button {} 或者 button::after {} 的样式



朵朵码爸爸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序button组件使用详解
01-03
本文为大家分享了微信小程序button组件的使用方法，供大家参考，具体内容如下 展示效果图 button组件的常用属性 size：default、mini—-default为块级按钮、mini为小按钮 type：primary、default、warn—-primary...
unity设置button样式
weixin_52744755的博客
12-11 451
在管理器中，选择刚刚添加的样式，点击下载，下载完成后，点击import。
【Unity】Button基础-按钮更换图片样式
好吃的和好看的都需要用实力来争取
12-24 1万+
话说，今天修改了一下项目中的内容，发现按钮不怎么好看，想用图片的方式改一改，然后点开Button，忽然发现好多内容都忘记了。。。 Transition（过渡方式）：按钮在状态改变时自身的过渡方式： Color Tint（颜色改变） Sprite Swap（图片切换） Animation（执行动画）（后面有详细介绍） Sprite Swap（图片切换过渡模式）： Highlighted Sprite（高亮图片）：选中状态或是鼠标靠近会进入高亮状态。 Pressed Sprite（按...
微信小程序中点击后的按钮样式
最新发布
qq_58800537的博客
02-21 509
按钮点击后的变换
微信小程序点击改变css,微信小程序按钮button样式修改自定义
weixin_36353849的博客
08-04 4899
在微信小程序中，当我们向页面中插入一个按扭button的时侯只需要简单的代码就可以了。插入button按钮并保存后，便可以以预览界面看到一个原始的按钮。小程序样式修改默认没有对按钮设置任何样式时，按钮占用整个一行，而按钮可点区域居中，使用控制台中的选择工具，选择这个按钮，查看一下按钮的默认样式。可以看到默认样式下有主要有button:not、button、button:after几个来控制按钮的样...
微信小程序原生button组件使用并修改样式
黎小小的博客
07-12 2650
注意type使用得type必须和修改时选择器样式（button[type=default]）一样，才能对其修改样式，否则样式不会被修改。如果是多端适配，需要使用type为default再修改样式。想使用原生button组件，但是想使用不同样式。
uniapp——小程序button按钮各种默认样式，修改按钮的默认样式
World_Mei的博客
07-22 1万+
一、按钮的默认样式 // 默认样式 button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px; box-sizing:border-box; font-size:18px; text-align:center; text-decoration:none; line-height:1; border-radiu
清除微信小程序button的默认样式
Trees__的博客
04-22 1万+
清除微信小程序button的默认样式 文章目录清除微信小程序button的默认样式总结 最近在微信小程序的开发过程中，经常的使用button按钮，但是我们要怎么样去除它们的默认样式呢? 一、去除button的边线：因为button的边框样式是通过::after方式实现的，所以我们在这里要使用::after 伪类选择器对默认样式进行覆盖. wxml页面 <view> <button>我是按钮</button> </view> wxss页面 button
清除button的所有样式
qq_49552046的博客
10-21 2528
在开发小程序时会有调起微信客服的功能,这是必须使用button里的一个open-type="contact"的属性,但是有些调起的按钮样式比较复杂,这时候就需要自定义按钮样式,首先我们要清除button自带的样式,下面直接附上代码。
微信小程序button组件自定义样式
03-29
background-color属性是修改背景颜色的，color是修改字体颜色的，这里注意：如果组件里面写 type='....'，修改背景颜色会无效，例如以下代码：   <!--修改背景颜色无效--> <button class='btn' bindtap='...
微信小程序（十四）button组件详细介绍
11-25
button按钮用的算是最普遍的组件之一。 主要属性： wxml <!--按钮默认样式，点击事件--> <button type="defaule" bindtap="clickButton">Defalut</button> <!--原始颜色，不可点击状态， ...
微信小程序 Button 组件详解及简单实例
11-29
微信小程序 Button 相关文章： 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input...
鎏嫣宫守护：微信小程序button 修改样式
03-29
跳坑《一百四十六》button按钮组件使用说明  项目需求，登陆界面的button需要使用橙色的bg，而在输入手机号码的时候，确认button 是disabled的。而默认的样式是绿色的，而直接类选择器设置样式，是没有效果的，在...
uniapp 去掉button默认样式
qq_42966789的博客
12-08 1822
uniapp 去掉button默认样式
小程序上设置button样式
hh3167253066的博客
02-18 9551
<button>确定</button> 此时，各项值均为默认值，效果如下：有边框以及圆角 设置其css如下：背景颜色background-color文字颜色color,设置type为primary是背景色为微信绿，无法设置背景颜色 .btn1 { width: 80%; margin-top: 20rpx; background-color: beige; color: white; } 修改圆角： .btn1 { width: 80%; margin
【小程序】小程序调试
庭落
07-26 3151
按个人习惯，我一般把小程序划分为开发调试和项目调试两大类。 开发调试 开发调试就是平时写代码时候的一些调试技巧，项目调试更偏向于真机预览调试这一块。开发调试基本网上有一些文字讲的比较详细了，这里直接贴链接，平时开发其实基本都懂个七七八八了。 简单介绍：https://www.cnblogs.com/cisum/p/10151807.html 官方详细说明：https://developers.weixin.qq.com/miniprogram/dev/devtools/debug.html#%E6%A8%A
【微信小程序】手机上开启调试模式
热门推荐
牛哞哞杂记
01-18 2万+
微信小程序手机上打开调试模式
微信小程序的自学之路一按钮篇
qq_55691371的博客
09-18 7490
微信小程序，按钮，设置按钮宽度，按钮宽度
微信小程序button按钮无法更改尺寸解决
J_H_T_的博客
09-06 3293
2.直接写内联样式, 在标签内部书写style属性值, 但是该方法 仍会被其他原来定义的样式所覆盖, 宽度和高度 在到达一定尺寸后 就无法继续缩小或扩大, 如果必须缩小 按钮大小尺寸, 则该方法不推荐使用!即可, 但影响性较大, 如果项目中的其他样式 使用了新版本的特性, 则 删除该行代码后 项目中的其他样式 可能会有所影响。在微信小程序新版本中, button按钮 无法支持在wxss文件中 直接自定义width 和 height。1. 推荐使用: 在根目录中的app.json文件中, 删除其中的。
<view class="" > <view class="click-popup"style="margin-top: 20px;"> <button type="primary" plain="true" bindtap="showPopup">进 入 软 件</button> </view> <popup class="modal-mask ele_hidden {{showModals?'ele_show':''}} " bindcancel="modalCancel" bindconfirm='modalConfirm' single='{{single}}'> <view class='modal-content'> <scroll-view scroll-y class='main-content'> <view class="page-body"> <view class="page-section"> <view class="page-section-title"></view> </view> <view class="page-section" > <view class="weui-cells weui-cells_after-title"> <radio-group bindchange="radioChange"> <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="value"> <view class="weui-cell__hd">{{item.value}}</view> <view class="ele_hidden">123456</view> <radio value="{{item.value}}" checked="true"/> </label> </radio-group> </view> </view> </view> </scroll-view> </view> </popup> </view>
07-17
这是一个小程序的代码段，包含了一些视图组件和事件绑定。以下是代码段的解释： 1. 外层的`<view>`标签表示一个视图容器。 2. `click-popup`类用于定义一个点击弹窗的样式。 3. 在样式中使用了`margin-top: 20px;`来设置弹窗与顶部的间距。 4. `<button>`标签表示一个按钮，使用了`type="primary"`和`plain="true"`属性来设置按钮的样式。 5. `bindtap="showPopup"`表示按钮被点击时触发名为`showPopup`的事件处理函数。 6. `<popup>`标签表示一个弹窗组件，使用了一些绑定事件和属性。 7. `class='modal-mask ele_hidden {{showModals?'ele_show':''}}'`用于设置弹窗的样式，`ele_hidden`和`ele_show`是条件类，根据`showModals`变量的值来判断是否显示弹窗。 8. `bindcancel="modalCancel"`和`bindconfirm='modalConfirm'`表示取消和确认按钮被点击时触发相应的事件处理函数。 9. `single='{{single}}'`表示是否为单选模式。 10. `<scroll-view scroll-y class='main-content'>`表示一个可纵向滚动的视图容器。 11. `<radio-group bindchange="radioChange">`表示一个单选框组，当选项发生变化时触发名为`radioChange`的事件处理函数。 12. `<label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="value">`表示一个标签组件，并使用`wx:for`指令来迭代`items`数组，`wx:key`用于指定迭代的唯一标识。 13. `<view class="weui-cell__hd">{{item.value}}</view>`表示一个视图容器，显示了`item.value`的值。 14. `<radio value="{{item.value}}" checked="true"/>`表示一个单选框，并使用`value`属性来设置选项的值，`checked="true"`表示默认选中该选项。 以上是对代码段的解释，希望能帮到你！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值