小程序 switch开关|复选框、slider、radio单选框

末蓝、 2021-07-24 14:55 509阅读 0赞

switch
    
    	<switch
    		checked,	是否选中 	
    		disabled,	是否禁用 
    		type:'switch'|'checkbox' 	开关|复选框
    		color,		选中时的轨道颜色
    		bindchange,	checked 改变时触发change事件,event.detail.value获取开关布尔状态
    	>
    	</switch>
    	
    	改变switch大小
    		方式一:
    			css3的zoom属性
    		方式二:
    			transform:scale(0.8)
    		方式三:
    			使用原生switch的类名,滑块的滑动区域并不会随着样式改变而改变
    			
    			.wx-switch-input {			滑块整体样式
    			  width: 200rpx !important;
    			  height: 60rpx !important;
    			} 
    			
    			.wx-switch-input::before {	关闭时,白色轨道的覆盖范围
    			  width: 180rpx !important;
    			  height: 56rpx !important;
    			} 
    			
    			.wx-switch-input::after {	滑块的样式
    			  width: 100rpx !important;
    			  height: 56rpx !important;
    			}
    
    slider滑动条
    	1.使用时必须设置滑动条宽度,推荐外面包一层view设置view的宽度,否则直接设置100%会超出屏幕
    	2.竖直滑动条可考虑旋转
    	<slider
    		min 		0,最小值 
    		max 		100,最大值 
    		step 		10,步长,即每滑动一次的距离,取值必须大于0,并且可被(max - min)整除
    		disabled 	是否禁用 
    		value 		当前取值
    		activeColor 		已选择的颜色
    		backgroundColor 	背景条的颜色
    		block-size 			28,滑块的大小,取值范围为12 - 28
    		block-color 		滑块的颜色 
    		show-value 			是否显示当前
    		bindchange 			完成一次拖动后触发的事件,event.detail.value获取当前值
    		bindchanging 		拖动过程中触发的事件,event.detail.value获取当前值
    	>
    	</slider>
    
    radio
    	单选框,选中后不可改变,当使用radio-group时变成多个只能选中一个
    	<radio
    		value 		radio标识,当该radio选中时,radio-group的change事件会携带radio的value
    		checked 	当前是否选中 
    		disabled 	是否禁用
    		color 		radio的颜色
    	>
    	</radio>
    	
    	<radio-group
    		bindchange="fn"
    	>
    	</radio-group>