⼩程序中使⽤全局样式
⼩程序中使⽤全局样式
css ⾃定义属性
1.语法
--*来声明变量名
var(--*)来使⽤变量
css ⾃定义属性使⽤中，var()允许接受第⼆个参数，当做缺省值，在使⽤时最好都填写⼀个缺省值，第⼆个参数也可以是另⼀个⾃定义属性
body{
--default-color: pink;
--font-base: 12px;
background-color:var(--default-color);
}
.button{
background-color:var(--theme-color, pink);
font-size:var(--font-ls, --font-base);
}
2.全局变量和局部变量
在:root 代码块中声明全局变量，在选择器中声明的为局部变量，局部变量会覆盖全局变量
:root{
--font-base: 14px;
--tet-color: #666666;
}
.
section-one{
--font-size: 16px;
font-size:var(--fonr-size);
color:var(--text-color);
}
3.css 计算
calc() 函数常常被⽤于跨单位的计算,css ⾃定义属性也可以参与到 calc 的计算中
css变量
.section-two{
--text-title-color: lightBlue;
font-size:calc(2 * var(--font-base));
color:var(--text-title-color);
}
4.与 javascript 共同使⽤
⾃定义属性也可以通过 getPropertyValue 和 setProperty ⽅法操作，可以动态改变⾃定义属性的值
// 获取DOM
const section = document.querySelector('.section-two')
const styles =getComputedStyle(section)
console.log('styles =>', styles)
// 读取变量值
const oldColor = PropertyValue('--text-title-color').trim()
console.log('oldColor =>', oldColor)
// 设置变量值
section.style.setProperty('--text-title-color','green')
⼩程序中使⽤
1.基础⽤法
web 开发中全局变量是定义在:root，⼩程序使⽤时，在 page 中定义变量,
在 app.acss 中的变量可以在全局各个页⾯中使⽤，同样也可以在各个页⾯独⽴定义页⾯专属的 css 变量
/* /app.acss --> */
page{
--base-color: #409eff;
--warning: #e6a23c;
--danger: #f56c6c;
--info: #909399;
--success: #67c23a;
......;
}
2.⼩程序中动态设置 css 属性
// 在js中设置css变量
let myStyle =`
-
-bg-color:red;
--border-radius:50%;
--wid:200px;
--hgt:200px;
`
let chageStyle =`
--bg-color:red;
--border-radius:50%;
--wid:300px;
--hgt:300px;
`
Page({
data:{
viewData:{
style: myStyle
}
},
onLoad(){
setTimeout(()=>{
this.setData({'viewData.style': chageStyle }) },2000)
}
})
<!--将css变量(js中设置的那些)赋值给style-->
<view class="container">
<view class="my-view"> <image src="/images/abc.png"mode="widthFix"/> </view>
</view>
/* 使⽤var */
.my-view{
width:var(--wid);
height:var(--hgt);
border-radius:var(--border-radius);
padding: 10px;
box-sizing: border-box;
background-color:var(--bg-color);
transition: all 0.3s ease-in;
}
.my-view image{
width: 100%;
height: 100%;
border-radius:var(--border-radius);
}
参考⽂档

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。