大家有没有遇到这样的一种现象,在看复杂的wxss,有时候总是理不清,比如:
第一种:before ,after
恰当的使用before和after能很好的减少层级的嵌套,提升渲染的性能和速度
效果一(最基本的效果):
代码如下:
.container_1 {
width: auto;
margin: 30rpx;
/* text-align: center; */
}
.view_1 {
font-size: 70upx;
color: red;
}
/* 在view_1控件之前 */
.view_1::before {
content: "苹果:¥";
font-size: 40rpx;
color: black;
margin-right: 10px;
}
/* 在view_1控件之后 */
.view_1::after {
content: ".00 元/斤";
font-size: 30rpx;
color: black;
}
<view class="container_1">
<view class="view_1">500</view>
</view>
效果二:before的content使用动态的值
代码跟上面的一样,只是有三处地方需要改动:(主要是使用 attr())
1、content: attr(href);
2、500
3、data里面添加值:valueTest: ‘hello’
效果三:
before前面相当于是一个view了,
下面是效果图:
代码为:(view_1还是用的上面的view_1)
.view_1::before {
content: "123";
display:flex;
align-items: center;
justify-content: center;
width: 30px;
height: 100%;
border-radius: 5px;
position: absolute;
left: -35px;
font-size: 40rpx;
background: rgb(255, 202, 202);
}
第二种: .class+空格+控件(image)
示例:
.view_1{
width: 100%;
height: 100%;
}
.view_1 image {
width: 90rpx;
height: 90rpx;
}
<view class=''>
<image src='../images/1.png'/>
</view>
解释2:
.view_1 image 表示设置view里面的image控件长宽为90rpx
第三种: @import
/** other.wxss **/
.appText{
margin:10px;
}
/** app.wxss **/
@import "other.wxss";
.content_text:{
margin:15px;
}
解释3:
app.wxss是全局样式,作用于每一个页面,而page下的每一个的wxss文件只作用于当前页面,并对全局样式中的相同属性会覆盖。
第四种: wxml中<view class=‘view1 view2’ / >
<view class="container_1">
<view class="view_1 view_2">500</view>
</view>
.container_1 {
width: auto;
margin: 30rpx;
text-align: center;
}
.view_1 {
position: relative;
display: inline-block;
font-size: 70rpx;
color: red;
}
.view_2 {
background-color: #6699FF;
}
解释4:
只要一个 class=“view_1” 的效果图为:
两个都要 class=“view_1 view_2” 的效果图为:
第五种:checkbox .wx-checkbox-input.wx-checkbox-input-checked
/*checkbox 整体大小 */
checkbox {
width: 240rpx;
height: 90rpx;
}
/*checkbox 选项方框 大小 */
checkbox .wx-checkbox-input {
width: 50rpx;
height: 50rpx;
}
/*checkbox选中后 选项方框 样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background: #5a76f5;
}
/*checkbox选中后 选项框(勾的颜色、大小、位置) 图标样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 28rpx;
height: 28rpx;
line-height: 28rpx;
text-align: center;
font-size: 22rpx;
color: #fff;
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
解释5:
没有以上代码的效果:
添加了以上代码的效果
第六种:动画的 @keyframes
@keyframes fnToLeft{
from{transform:translate3d(0rpx, 0px, 0px)}
to{transform:translate3d(-240rpx, 0px, 0px)}
}
第七种:[class*=animation-]
表示所有包含“animation-”都会巨有如下的属性
[class*=animation-] {
/* 设置动画在两秒内完成: */
animation-duration: 0.5s;
/* 动画以低速结束。 */
animation-timing-function: ease-out;
animation-fill-mode: both;
}
/* 这里的animation-1就具备上面的那些属性 */
animation-1{
display:flex
}
第八种:wxss中使用变量[data-tab=“1”]
wxml代码:
<view class="view2" data-tab="0">内容二</view>
<view class="view2" data-tab="1">内容二</view>
<view class="view2">内容二</view>
wxss代码:
.view2[data-tab="1"] {
background-color: rgb(232, 241, 148);
height: 200rpx;
margin: 20rpx;
}
.view2[data-tab="0"] {
background-color: rgb(185, 250, 166);
height: 200rpx;
margin: 20rpx;
}