小程序switch组件大小改变，默认底色改变，位置改变

最新推荐文章于 2023-02-14 13:57:10 发布
最新推荐文章于 2023-02-14 13:57:10 发布
阅读量452 收藏
点赞数
分类专栏： 微信小程序 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wNverlandw/article/details/116575060
版权
本文主要探讨了如何在微信小程序中修改switch组件的大小和默认底色，提到了wxml和wxss文档中的实现方式，并指出使用js进行复杂操作可能带来的问题。作者提到存在多种方法可以改变switch组件的外观，但目前不涉及颜色改变的实现。
摘要由CSDN通过智能技术生成

小程序switch组件大小改变，默认底色改变，位置改变

小程序switch组件的改变

wxml文档

    <view class="Option-box">
      <view class="Option-one">
       <view class="switch-text">仅显示本周要上的课程</view>
       <<
最低0.47元/天 解锁文章
Hinch Wu cod rec
关注
专栏目录
微信小程序，自定义switch组件
想飞的猪的博客
12-28 2544
在我看来这个主要是样式，相当于自己重新写一个switch样式，下面直接看源码 目录结构 switch.wxml &lt;view class="switch"&gt; &lt;view class="container"&gt; &lt;text class="title"&gt;自定义switch&lt;/text&gt; &lt;view c
第一章 Java程序设计-开发入门1
m0_65765653的博客
03-14 2711
Java开发入门
微信小程序switch组件样式调整
qq_23159841的博客
07-23 841
<switch color="#FDA424" checked="{{switchChecked}}" bindchange="switchChange"/> 方法1：css样式调整 .wx-switch-input{ width:82rpx !important; height:40rpx !important; } .wx-switch-input::before{ width:80rpx !important; height: 36rpx !important; }.
微信小程序switch开关组件修改样式(大小，颜色)
徊忆羽菲
02-14 3218
微信小程序switch开关组件修改样式(大小，颜色)
微信小程序自定义switch
sxs7970的博客
03-09 1720
微信小程序自带的switch，可以改变大小，颜色，但是是有局限性的，所以好多时候都需要自己去写一个。 修改微信小程序自带对的switch /*swtich整体大小及背景色*/ .wx-switch-input{ width:82rpx !important; height:36rpx !important; background: red !important; ...
微信小程序 switch组件详解及简单实例
08-31
主要介绍了微信小程序 switch组件详解及简单实例 的相关资料,需要的朋友可以参考下
Java 程序设计基础（第四版）下
Vimer.Bai的博客
05-14 7085
第 10 章 Java 语言的输入输出与文件处理 什么是文件的输入输出？程序从文件读取数据称为文件的输入；程序向文件写入数据称为文件的输出。什么是流？Java 语言中分为哪两种流？这两种流有何差异？流是指计算机个部件之间的数据流动。在 Java 语言中，把不同类型的输入输出源（键盘、屏幕、文件、网络等）抽象为流，而其中输入或输出的数据称为数据流； 按照数据的传输方向，流可以分为输入流和输出流。从流的
2：Android5.0中Material Dialog、SwipeRefreshLayout等控件的使用。
常灿光的博客
11-28 2434
前言： 上一篇Android 5.0的文章，小编仔细学习使用了TextInputLayout和Snackbar，不清楚的可以查看原文链接，这一篇文章中将会全部介绍5.0中其它比较常用的控件，
JavaScript教程（一）
m0_56752010的博客
04-21 2543
听课笔记
微信小程序 switch组件修改样式(大小，颜色)
qq_44993242的博客
08-13 5876
1. 如何修改switch样式大小 /* swtich整体大小 */ .wx-switch-input{ width: 100rpx !important; height: 57rpx !important; } /* false的样式 */ .wx-switch-input::before{ width: 100rpx !important; height: 53rpx !important; } /* true的样式 */ .wx-switch-input::after{ wid
微信小程序 switch 开关自定义大小样式、背景颜色
heirui的专栏
05-10 4809
/* swtich整体大小 */ .wx-switch-input{ width: 100rpx !important; height: 57rpx !important; } /* false的样式 */ .wx-switch-input::before{ width: 100rpx !important; height: 53rpx !important; } /* true的样式 */ .wx-switch-input::after{ width: 57rpx !importan.
完美控制微信小程序组件Switch大小
qq_34996610的博客
07-25 4391
  只需要加一个css属性：zoom； 看了很多博客写去改变input的宽高，麻烦不说。自己调整的大小也很容易出问题。 我自己试过，iphone5上的效果简直惨不忍睹。 然后就灵机一动，想到了曾用过的zoom属性。 html代码：(用的pug语法，mpvue框架。反正就是两个switch组件的意思。) 最后为效果。左边为缩放后的switch组件。不会存在适配问题。按照原生等...
微信小程序 开关选择器 switch 组件
java1234的博客
05-31 1664
完整微信小程序(Java后端) 技术贴目录清单页面（必看） 开关选择器。 属性 类型 默认值 必填 说明 最低版本 checked boolean false 否 是否选中 1.0.0 disabled boolean false 否 是否禁用 1.0.0 type string switch 否 样式，有效值：switch, checkbox 1.0.0 color string #04BE02 否 switch 的颜色，同 css 的 color 1.0.0 bindch
微信小程序switch样式修改
wzszjy2的博客
08-10 1750
微信小程序结合了H5、自有组件和原生组件，所以有很多地方不能像普通H5一样对待。 对于表单组件switch，直接修改样式不生效，可以全用.wx-switch-input进行设置。 switch开关组件由于不能靠简单的input实现，所以还需要::before和::after分别设置覆盖背景和开关按钮（仅可设置部分样式）。 具体代码如下： .wx-switch-input { width: 102rpx !important; height: 62rpx !important; backgroun
小程序基本命令
aiven1637的博客
10-30 3327
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序，改变switch组件大小，缩放switch组件
她的猿的博客
05-22 2396
switch 样式 .wx-switch-input{ transform:scale(.6); } 原文： https://unnue.com/article/73
修改微信小程序switch开关样式
热门推荐
qq_39108466的博客
04-13 2万+
转载及参考：https://blog.csdn.net/littlebeargreat/article/details/79130305 /*swtich整体大小及背景色*/ .wx-switch-input{ width:82rpx !important; height:40rpx !important; background: #50D2C2 !important; ...
微信小程序修改switch组件的大小
double徐
05-11 4615
在使用switch组件时，想修改switch的大小，设置的height，width都没有效果， 查看官方文档，发现没有设置大小的属性 官方文档如下： 使用下面样式可进行修改 .wx-switch-input{width:42px !important;height:22px !important;} .wx-switch-input::before{width:40px !important...
微信小程序switch开关样式调整
littlebearGreat——宁静致远
01-22 2万+
下面的代码复制粘贴进wxss中就管用，不用往wxml中加任何选择器 /*swtich样式-start*//*swtich整体大小*/.wx-switch-input{ width:82rpx !important; height:40rpx !important;}/*白色样式（false的样式）*/.wx-switch-input::before{ width:80rpx !import
微信小程序switch组件如何使用
最新发布
04-12
可以通过在wxml文件里添加switch组件, 并在js文件里监听switch组件的状态来实现。例如： wxml文件： ``` <switch checked="{{switchChecked}}" bindchange="switchChange"> ``` js文件： ``` Page({ data: { switchChecked: false }, switchChange: function (e) { this.setData({ switchChecked: e.detail.value }) console.log('switchChange事件，当前switch状态为:' + e.detail.value) } }) ``` 以上代码中，switch组件的状态保存在data属性里的switchChecked中。在switchChange事件中监听switch状态的改变，并根据需要进行相应操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值