微信小程序–样式

本是古典何须时尚 2023-02-19 12:29 51阅读 0赞

# 微信小程序–样式 #

## 1.布局小技巧 ##

### 1.1 通过添加空标签，实现内容之间的间隔 ###

.height_20{ 
      height: 20px;
    }

### 1.2 实现下划线 ###

<view class='height_1 gray'></view> .gray{ 
      background-color: #F0F0F0;
    }
    .height_1{ 
      height: 1px;
    }

### 1.3 用一个空盒子，实现虚线效果 ###

*  方法1：

.two_amone_left_amone { 
      height: 84rpx;
      width: 2rpx;
      border: 2rpx dashed #e6e6e6;
      margin-left: 16rpx;
    }

*  方法2：

.Cost_Detailed_con::before { 
      content: "";
      display: block;
      width: 10rpx;
      height: 40rpx;
      background: red;
      position: absolute;
      top: 0;
      left: -4rpx;
    }
    
    .Cost_Detailed_con::after { 
      content: "";
      display: block;
      width: 10rpx;
      height: 90rpx;
      background: red;
      position: absolute;
      bottom: 0;
      left: -4rpx;
    }

### 1.内容最多不能超过2行，超出部分以省略号代替… ###

display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;

### 2.设置全局样式 ###

.u-f,
    .u-f-ac,
    .u-f-ajc {
    	display: flex;
    }
    .u-f-ac,
    .u-f-ajc {
    	align-items: center;
    }
    .u-f-ajc {
    	justify-content: center;
    }
    .u-f-jsb {
    	justify-content: space-between;
    }

### 3.添加旋转动画 ###

<image class = "rotation" />
    
    .rotation {
    	animation: rotation 12s linear infinite;
    	-moz-animation: rotation 12s linear infinite;
    	-webkit-animation: rotation 12s linear infinite;
    	-moz-animation: rotation 12s linear infinite;
    }
    
    @keyframes rotation {
    	from{
    		transform: rotate(0deg);
    	}
    	to{
    		transform: rotate(360deg);
    	}
    }

### 4.页面遮罩层 ###

.modal {
    	position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	z-index: 99;
    	text-align: center;
    	background: rgba(0,0,0,0.6);
    }

### 5.弹性布局 ###

<view class="musicList_container">
        <view class="musicList_index">左边</view>
        <view class="musicList_info">右边占剩余空间1份</view>
    </view>

为什么设置 width: 0 ？
    
    如果当前内容的宽度很大，超出父元素剩余空间，那么就不会按照 flex-grow: 1; 这个比例去分配剩余空间
    这时需要设置 width: 0; 这样就不会按照原有内容的宽度分配剩余空间，
    而是按照弹性盒模型设置的比例分配 flex-grow: 1
    
    .musicList_container {
    	display: flex;
      	align-items: center;
    }
    .musicList_index {
    	 width: 80rpx;
    }
    .musicList_info {
      flex-grow: 1;
      width: 0;
    }

### 6.高斯模糊效果 ###

*  方法1

image {
     	// 高斯模糊
     	filter: blur(10rpx);
     }

*  方法2

.player_container {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      filter: blur(40rpx);
      opacity: 0.5;
      z-index: -1
    }
    .player_mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #222;
      z-index: -2
    }

### 7.三角形 ###

1.  我们用css 边框可以模拟三角效果
2.  宽度高度为0
3.  我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
4.  为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;

.myTriangle { 
          width: 0px;
          height: 0px;
          line‐height:0；
    	  font‐size: 0;
          border: 40px solid;
          border-top-color: transparent;
          border-left-color: transparent;
          border-right-color: transparent;
          border-bottom-color: red;
    }

## 2. 动态添加class类 ##

class="menu_item {
       {index===currentIndex?'active':''}}"

## 3. 三元表达式，多添加判断 ##

<span>{
       {status===0?'正常会员':status===1?'停用会员':''}}</span>