前端开发

【css】常用样式&骨架屏

2019-07-08  本文已影响0人  Q小予o0

css

css Tips


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;
    }
.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;
}
   {display: flex;  
  justify-content:center;    
  align-items:center; 
         
     }
{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;
 }
  ::-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
上一篇下一篇

猜你喜欢

热点阅读