完美控制微信小程序组件Switch大小

最新推荐文章于 2024-09-20 10:08:11 发布
置顶 最新推荐文章于 2024-09-20 10:08:11 发布
阅读量4.3k 收藏 2
点赞数 2
分类专栏： mini-program 文章标签： css weixin switch
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34996610/article/details/81204869
版权

 

只需要加一个css属性：zoom；

看了很多博客写去改变input的宽高，麻烦不说。自己调整的大小也很容易出问题。

我自己试过，iphone5上的效果简直惨不忍睹。

然后就灵机一动，想到了曾用过的zoom属性。

html代码：(用的pug语法，mpvue框架。反正就是两个switch组件的意思。)

最后为效果。左边为缩放后的switch组件。不会存在适配问题。按照原生等比缩放。嗯，需要的话也可以放大啦。你们自己控制倍数就行了~

 

鹿鹿安
关注
专栏目录
小程序switch组件大小改变，默认底色改变，位置改变
wNverlandw的博客
05-10 442
这里写自定义目录标题小程序switch组件的改变wxml文档wxss文档 小程序switch组件的改变 wxml文档 <view class="Option-box"> <view class="Option-one"> <view class="switch-text">仅显示本周要上的课程</view> <view class="swichclass"> <switch ty
微信小程序修改switch组件大小
weixin_33736832的博客
05-23 643
微信小程序的switch组件的大小不能直接通过样式定义，必须通过以下方式定义： Tips&bugs： 样式名必须和上图严格一致，图中代码定义的并不是样式类名，而是直接作用在switch组件上的样式规则，因此无需在switch组件中定义class属性。 所定义的三个样式的大小规律如下： （1）::before宽度 = switch宽度 - 1 ::before高度 = switch...
微信小程序switch开关组件修改样式(大小，颜色)
徊忆羽菲
02-14 3140
微信小程序switch开关组件修改样式(大小，颜色)
微信小程序：switch、radio等控件缩放zoom
测试0901-1
04-13 537
之前做App时，因为Android原生控件不太美观，而且各个版本之间的控件样式都不一致，所以针对一些单选、多选、开关等控件时，往往会采取自定义的形式去实现。 微信小程序.itlao5.com 在小程序中，因为都是微信制作的，控件美观性及版本一致性上都没什么问题，所以针对一些如switch、radio等控件，就不去做自定义处理了。但是，总感觉...
微信小程序动态操控switch开和关
一尾流莺 半世情缘
03-11 2485
最近小程序项目中遇到了switch方面的一些应用，这边就来总结下。 // &lt;switch checked="{{switchCheck}}" @change="switch"/&gt; &lt;view @tap = 'openSwitch'&gt; 打开开关 &lt;/view&gt; &lt;view @tap = 'closeSwitch'&gt; 关闭开关 &lt;/view.
微信小程序 switch组件大小设置问题
shi450561200的博客
07-10 1202
【代码】微信小程序 switch组件大小设置问题。
微信小程序修改switch组件的大小
double徐
05-11 4600
在使用switch组件时，想修改switch的大小，设置的height，width都没有效果， 查看官方文档，发现没有设置大小的属性 官方文档如下： 使用下面样式可进行修改 .wx-switch-input{width:42px !important;height:22px !important;} .wx-switch-input::before{width:40px !important...
微信小程序--修改switch组件的大小size
ZHHhao的博客
07-01 1720
修改switch组件的大小 小程序中switch组件的大小往往和实际项目中的大小有些出入，但是发现文档中并没有修改大小的方法，但是可以根据自己的实际情况进行颜色设置。 直接上代码： <switch checked>正常开关</switch> <switch checked style="transform:scale(0.7)" color="red">开关</switch> <switch checked style="zoom:0.6" color=
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
08-28
--------------------------------</view><view>微信小程序组件：开关组件switch</view><switch checked type="switch" bindchange="switchBindchange"/>开关组件当前状态：{{switchState}}</view>` 在上面的代码中...
微信小程序自定义 Switch 组件模板
07-08
WXCustomSwitch 微信小程序自定义 Switch 组件模板，微信小程序模板导入即可使用
微信小程序switch组件使用详解
08-28
在微信小程序中，我们可以使用JavaScript来控制switch组件的状态。我们可以使用JavaScript来获取switch组件的状态，然后根据状态来改变switch组件的外观样式和行为。 下面是一个基本的switch组件JavaScript示例代码...
微信小程序组件new微信小程序组件new微信小程序组件new
02-23
"微信小程序组件"是构成小程序应用的基础元素，它们是预定义的功能模块，开发者可以通过组合和配置这些组件来快速构建用户界面。本篇文章将深入探讨微信小程序组件的相关知识点。 1. **组件的基本概念** 微信小...
微信小程序 switch组件详解及简单实例
08-31
在微信小程序中，`switch`组件是一个常用的交互元素，它通常用于表示两种状态之间的切换，例如开/关、是/否等。本文将详细介绍`switch`组件的基本使用方法，并通过一个简单的实例来演示如何在实际开发中应用。 一、...
微信小程序，改变switch组件大小，缩放switch组件
她的猿的博客
05-22 2384
switch 样式 .wx-switch-input{ transform:scale(.6); } 原文： https://unnue.com/article/73
【Kevin Learn 小程序】--＞switch
Kevin Learn Android
02-20 584
小程序中的表单组件 switch
微信小程序 之修改switch组件尺寸大小
gyueh的博客
08-13 2052
组件 <switch checked="{{switchChecked}}" color="#2ea7e0" bindchange="" /> 方案一： 通过transform中的缩放属性改变组件大小 .wx-switch-input{ transform:scale(0.8) !important; } 方案二： 通过原生组件的类名改变组件大小 .wx-switch-input { width: 102rpx !important; height: 60rpx !import
微信小程序——switch组件设置大小
前端老兵
11-03 1万+
附上switch组件的文档地址 https://developers.weixin.qq.com/miniprogram/dev/component/switch.html 如上图，官方文档没有给出如何修改switch组件大小的值，只给出修改颜色的值，接下来就让我们来解决修改switch大小的问题，css中有个zoom属性，我们可以给zoom的值设置为 zoom:.6; 结果如下： ...
微信小程序-改变switch组件大小
热门推荐
吹泡泡的星星
04-19 1万+
微信开发文档中，switch能修改颜色，没有直接修改switch大小的属性。用一般控件height &amp; width来修改宽高是没有用的。。。使用如下方法：在.wxss文件：.wx-switch-input{width:42px !important;height:20px !important;}.wx-switch-input::before{width:41px !important;...
HTML中直接创建一个“onoff”图形开关包括css+script
最新发布
TrueLink的博客
09-20 897
在HTML中直接创建一个“onoff”图形开关（通常指的是一个类似于物理开关的UI组件，可以切换开或关的状态），并不直接支持，因为HTML主要用于内容的结构化，而不是复杂的用户界面组件。然而，你可以通过结合HTML、CSS和JavaScript（可能还需要使用JavaScript库或框架）来实现这样的效果。以下是一个简单的例子，展示如何使用HTML（用于结构）、CSS（用于样式）和JavaScript（用于交互）来创建一个基本的图形开关。/* 这里粘贴上面提供的CSS代码 */// 例如，监听开关的变化。
微信小程序switch组件如何使用
04-12
可以通过在wxml文件里添加switch组件, 并在js文件里监听switch组件的状态来实现。例如： wxml文件： ``` <switch checked="{{switchChecked}}" bindchange="switchChange"> ``` js文件： ``` Page({ data: { ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值