【css】常用样式&骨架屏
2019-07-08 本文已影响0人
Q小予o0
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