当前位置:网站首页>小程序 修改样式 ( placeholder、checkbox的样式)
小程序 修改样式 ( placeholder、checkbox的样式)
2022-07-05 18:24:00 【不求人0】
小程序 修改样式 ( placeholder、checkbox的样式)
小程序 修改样式 placeholder 样式
.wxml
<input placeholder="请输入用户名" placeholder-class="placeholderClass" />
.wxss
.placeholderClass{
font-weight: 400;
color: rgba(0, 0, 0, 0.14);
}
小程序 修改样式 ( checkbox的样式)
.wxml
<checkbox-group class="login-remember-check" bindchange="checkboxChange">
<label class="checkbox">
<checkbox class="login-remember-check-active" bindchange="checkboxChange" checked="{
{ isCheckPwd }}"/>
<text class="{
{ isCheckPwd ? 'login-remember-check' : 'login-remember-no-check' }}">记住用户名</text>
</label>
</checkbox-group>
.wxss
/* 修改checkbox的样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before,
checkbox .wx-checkbox-input.wx-checkbox-input {
border-color:#14D1B4;
color: #14D1B4;
}
.js
data: {
isShowPwd:true, // 是否显示密码
showType:"text", // 密码与text的类型
isCheckPwd:false, // 是否记住用户名
},
// 切换密码格式
changePwdType(){
if (this.data.isShowPwd) {
//如果this.data.isShow为true,则表示为密码小黑点
this.setData({
isShowPwd:false,
showType:"password"
})
} else {
this.setData({
isShowPwd: true,
showType: "text"
})
}
},
// 记住用户名
checkboxChange(e){
console.log("checkboxChange",e.detail.value.length);
let resChecked = true
e.detail.value.length ? resChecked = true:resChecked = false
this.setData({
isCheckPwd:resChecked
})
},
.
- 效果
边栏推荐
- To solve the stubborn problem of Lake + warehouse hybrid architecture, xinghuan Technology launched an independent and controllable cloud native Lake warehouse integrated platform
- Clickhouse (03) how to install and deploy Clickhouse
- How can cluster deployment solve the needs of massive video access and large concurrency?
- 图像分类,看我就够啦!
- 个人对卷积神经网络的理解
- 分享:中兴 远航 30 pro root 解锁BL magisk ZTE 7532N 8040N 9041N 刷机 刷面具原厂刷机包 root方法下载
- @Extension, @spi annotation principle
- 模拟百囚徒问题
- Numerical calculation method chapter8 Numerical solutions of ordinary differential equations
- 第十一届中国云计算标准和应用大会 | 云计算国家标准及白皮书系列发布 华云数据全面参与编制
猜你喜欢
Privacy computing helps secure data circulation and sharing
@Extension, @spi annotation principle
@Extension、@SPI注解原理
MYSQL中 find_in_set() 函数用法详解
Can communication of nano
About Estimation with Cross-Validation
The 11th China cloud computing standards and Applications Conference | cloud computing national standards and white paper series release, and Huayun data fully participated in the preparation
瀚升优品app翰林优商系统开发功能介绍
Image classification, just look at me!
Reading notes of Clickhouse principle analysis and Application Practice (5)
随机推荐
Reptile 01 basic principles of reptile
What is the reason why the video cannot be played normally after the easycvr access device turns on the audio?
Sibling components carry out value transfer (there is a sequence displayed)
瀚升优品app翰林优商系统开发功能介绍
Gimp 2.10 tutorial "suggestions collection"
图片数据不够?我做了一个免费的图像增强软件
vulnhub之darkhole_2
快速生成ipa包
模拟百囚徒问题
[use electron to develop desktop on youqilin]
在通达信上做基金定投安全吗?
《2022中国信创生态市场研究及选型评估报告》发布 华云数据入选信创IT基础设施主流厂商!
Introduction to Resampling
Exemple Quelle est la relation entre le taux d'échantillonnage, l'échantillon et la durée?
FCN: Fully Convolutional Networks for Semantic Segmentation
Use of print function in MATLAB
个人对卷积神经网络的理解
ViewPager + RecyclerView的内存泄漏
文章中的逻辑词
开户注册股票炒股安全吗?有没有风险的?靠谱吗?