微信小程序:switch、radio等控件缩放zoom

itlao6 原创 开发&源码 微信小程序评论1,050字数 864阅读2分52秒阅读模式

之前做App时,因为Android原生控件不太美观,而且各个版本之间的控件样式都不一致,所以针对一些单选、多选、开关等控件时,往往会采取自定义的形式去实现。

微信小程序:switch、radio等控件缩放zoom
微信小程序.itlao5.com

在小程序中,因为都是微信制作的,控件美观性及版本一致性上都没什么问题,所以针对一些如switch、radio等控件,就不去做自定义处理了。但是,总感觉这些控件的大小与界面有点不太协调,于是就想办法来改变大小:文章源自IT老刘-https://wp.itlao6.com/894.html

首先想到的是,通过width和height来改变尺寸,但是发现设置后无效,于是想到了important,css变为:文章源自IT老刘-https://wp.itlao6.com/894.html

.wx-switch-input{width:106rpx !important;height:50rpx !important;}
.wx-switch-input::before{width:106rpx !important;height: 50rpx !important;}
// 中间圆球尺寸
.wx-switch-input::after{width: 44rpx !important;height: 44rpx !important;}

但是,这样虽然在iphone 5上正常了,但是在开发者工具切换屏幕时,且发生了尺寸问题,特别是切换到ipad尺寸时,switch切换后居然圆球在中间位置,不在右边,所以,这样切换不太合适。文章源自IT老刘-https://wp.itlao6.com/894.html

然后,css中有zoom属性,试下:文章源自IT老刘-https://wp.itlao6.com/894.html

.zoom {
  zoom: .6
}

将zoom加入想要设置的控件中,在开发者工具中,手机尺寸基本都正常,但是在ipad中,显示的尺寸比其他文字小了很多,但是比上面important改变尺寸而言,至少控件时正常的,圆球不会出现到中间位置。文章源自IT老刘-https://wp.itlao6.com/894.html

最终考虑,应该根据不同屏幕尺寸设置zoom的值,手机设置一个zoom值,pad根据屏幕尺寸设置为其他zoom值。文章源自IT老刘-https://wp.itlao6.com/894.html

简书:ThinkinLiu 博客: IT老五文章源自IT老刘-https://wp.itlao6.com/894.html

ps: 以上代码有的写了switch,radio其实也一样,zoom可以用于switch,也能用于radio等其他控件...

微信小程序:switch、radio等控件缩放zoom
IT老五(it-lao5):关注公众号,一起源创,一起学习!
文章源自IT老刘-https://wp.itlao6.com/894.html文章源自IT老刘-https://wp.itlao6.com/894.html
继续阅读
weinxin
我的微信公众号
微信扫一扫关注公众号,不定时更新
itlao6
  • 本文由 发表于 2019年 4月 13日 22:55:40
  • 转载请务必保留本文链接:https://wp.itlao6.com/894.html
评论  0  访客  0
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定