微信小程序组件样式修改

微信小程序checkbox、radio、button、switch、swiper组件样式（CSS）修改

1.checkbox样式修改

/*checkbox整体大小*/
checkbox {width: 240rpx;height: 90rpx;
}/*checkbox选项框大小*/
checkbox . wx-checkbox-input {width: 50rpx;height: 50rpx;border-radius: 50%;     //选项框变成O
}/*checkbox选中后样式*/
checkbox . wx-checkbox-input. wx-checkbox-input-checked {background: #00C250;    //选中后的背景颜色
}/*checkbox选中后图标样式*/
checkbox . wx-checkbox-input. wx-checkbox-input-checked::before {width: 28rpx;       //里面选中icon的宽height: 28rpx;      //里面选中icon的高line-height: 28rpx;text-align: center;font-size: 22rpx;color: #fff;    //icon的颜色background: transparent ;transform: translate(-50%, -50%) scale(1);
}

2、修改默认的radio样式

/*默认背景样式*/
radio .wx-radio-input {width: 40rpx;height: 40rpx;
}
/*选中后的背景样式(红色背景无边框可根据UI需求自己修改) */
radio .wx-radio-input.wx-radio-input-checked {width: 40rpx; /*选中后对勾大小，不要超过背景的尺寸*/height: 40rpx; /*选中后对勾大小，不要超过背景的尺寸*/border: none;background: #f00;
}
/*选中后的对勾样式(白色对勾 可根据[UI需求自己修改) */
radio .wx-radio-input.wx-radio-input-checked: :before {border-radius: 50%;     /*圆角*/width: 40rpx;       /*选中后对勾大小，不要超过背景的尺寸*/height:. 40rpx;       /* 选中后对勾大小，不要超过背景的尺寸*/1ine-height: 40rpx;text-align: center;font-size:30rpx;    /*对勾大小30rpx */co1or:#fff;      /*对勾颜色白色*/border: 1rpx solid #f00;background: #f00; transform: translate(-50%，-50%) scale(1);
}

3、修改微信小程序button组件样式

//修改禁用的时候样式
button[disabled]:not([type]){color: #fff;background-color: #fff;opacity: 0.3;
}
//去掉边框
button::after {border: none;
}
//按钮的样式类型样式修改
button[type='primary']{background-coLor: #FFCCOO;color: #FFF;
}
//点击按钮的样式类型样式修改
<button class="btn" hover-class="btn_hover">确定</button>
. btn_hover{background-color: pink;
}

4、修改switch开关样式

/*switch整体大小及背景色*/
. wx-switch-input {width:82rpx !important;height :36rpx !important;background:#50D2C2 !important;border: #50d2c2 !important;      /*重置开关边框颜色*/
}
/*白色样式(false的样式) */
. wx-switch-input::before {width:80rpx !important;height: 36rpx !important;
}
/*绿色样式(true的样式) */
. wx-switch-input::after {width: 40rpx !important;height: 36rpx !important;
}

.wx-switch-input::before {background:#d9d9d9 !important;
}

5、修改swiper轮播组件样式

<swiper class="swiper-box" indicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}" wx:key='{{index}}'><swiper-item><image src="{{item}}" class="slide-image" /></swiper-item></block>
</swiper> .swiper-box{height: 456rpx;
}
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{margin-bottom: 2rpx;
}
圆点的样式
.swiper-box .wx-swiper-dot{width:40rpx;display: inline-flex;height: 20rpx;margin-left: 6rpx;justify-content:space-between;
}
.swiper-box .wx-swiper-dot::before{content: '';flex-grow: 1;background: rgba(255,255,255,0.8);border-radius: 10rpx;
}
.swiper-box .wx-swiper-dot-active::before{background:red;
}

微信小程序组件样式修改相关推荐

微信小程序-组件样式覆盖
现在有这样一个需求: 你的页面为home.wxml,你用到了一个组件比如modal.wxml,但是当你把组件引入过来的时候,却发现样式需要做调整? 这下没辙了,我用别人的组件还可以修改别人的样式吗.这 ...
微信小程序组件样式隔离
Component({options: {styleIsolation: 'isolated'} }) styleIsolation可选参数 isolated 组件和调用页面相互不会影响 apply ...
微信会员卡html修改样式模板,微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
微信小程序组件、路由、组件通信、侦听器
一.微信小程序组件组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件组件是视图层的基本组成单元. 组件自带一 ...
微信小程序组件（车牌号输入，支付键盘，滑块验证）
目录车牌号输入组件密码支付键盘组件滑块验证组件车牌号输入组件如图基于微信小程序组件封装,输出值为当前选择车牌号,可回显车牌号. 支持7位8位车牌号,因为我的项目没有此需求,所以没有测试,具 ...
微信小程序组件库开发记录
微信小程序组件库开发记录背景前言技术选型环境搭建安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片拷贝文件到另一个目录删除目录整合创 ...
android img标签属性_微信小程序组件叠加效果（如 Android 中的添加蒙层）
实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果. 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置 ...
【微信小程序】三、微信小程序组件的基本使用
五.微信小程序组件微信小程序框架为开发者提供了一系列组件,开发者可以通过组合这些组件进行快速开发. (1)微信小程序组件基础概念什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风 ...
微信小程序 - 组件化开发
微信小程序 -- 组件化开发,总结一下开发思路及过程: 组件,类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成. 1.首先,在 miniprogram 文件夹下,创建一个 ...

微信小程序组件样式修改

微信小程序checkbox、radio、button、switch、swiper组件样式（CSS）修改

微信小程序组件样式修改相关推荐

最新文章

热门文章