【css】常用样式&骨架屏

css

css Tips

• css更多写法
• tanform动画 矩阵
• 图片压缩规则
• [x] 阿里云压缩规则：?x-oss-process=image/resize,w_120
• [ ] 七牛云 压缩规则：?imageView2/2/w/210

---

• 粘性布局：{ position: sticky; top: 10px; },适合顶部菜单，滚动时固定
• border-top: 10rpx solid over:hidden //隐藏边框
• 消除input默认样式

input::-ms-clear{display: none;} // 文本输入框的 X  **/
input::-ms-reveal{display: none;} // 密码输入框的 X  **/
input, button, select, textarea {
outline: none;
-webkit-appearance: none;
border-radius: 0;
}
input::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
    position: absolute; 
    right: 0;
} // 消除Mac本密码输入框聚焦显示小钥匙的图标

• 去掉浏览器滚动条

.scrollbar-customize::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
    display: none;
    }

• 控制多出的文字显示...省略号， -webkit-line-clamp: 2;数字控制几行出现省略号

.tmp-ellipsis2 { 
            overflow: hidden;
            text-overflow: ellipsis;
           display: -webkit-box;
            -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
 }

• 单行显示省略号...

{     overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

• flex布局，水平垂直居中

   {display: flex;  
  justify-content:center;    
  align-items:center; 
         
     }

• flex布局，两端对齐

{display: flex;
align-items: center;
justify-content:space-between;
}

• 向上三角形

 {width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
 }

• 去掉滚动轴的灰色bar

  ::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
    }

瀑布流图片高度自适应 不定高

style="padding-bottom: {{content.baseImageInfo.height/content.baseImageInfo.width*100}}%"

canvas

save：用来保存Canvas的状态。
save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
restore：用来恢复Canvas之前保存的状态。
防止save后对Canvas执行的操作对后续的绘制有影响。

骨架屏自定义组件参考链接

参数	类型	默认值	说明
showSkeleton	Boolean	true	默认显示骨架屏
selector	String	skeleton	渲染节点的标识前缀，比如selector="skeleton"，那么页面根节点就是class="skeleton"绘制矩形就是class="skeleton-rect"，圆形就是class="skeleton-radius"
loading	String	spin	骨架屏渲染时的动画，有spin和chiaroscuro
bgcolor	String	#FFF	骨架屏背景色
zIndex	string	40	骨架屏层级

NOTE

业务侧可以自行判断数据是否加载完成，进而隐藏骨架屏，比如 <skeleton selector="skeleton" wx:if="{{showSkeleton}}"></skeleton>

以最小节点原则添加相应的class， <view class="box"><text class="skeleton-rect">这是有margin和padding属性的文案</text></view>

示例

<Skeleton wx:if="{{showSkeleton}}" 
          bgcolor="#FFF" 
          selector="skeleton"
          zIndex="60" 
          loading="chiaroscuro">
</Skeleton>

1001559481505_.pic_hd copy.jpg