【微信小程序/前端】实用样式相关内容简记

0 前言

一些零散的点的简单记录

1 Vant

1.1 van-button

/* 取消点击按钮时，按钮变灰 */
.van-button--active:before{
  opacity: 0;
}

/* 按钮点击时缩小 */
.yourCustomButtonStyle:active{
  transform: scale(0.98)
}

/* 按钮添加渐变色 */
/* 配色参考网址: https://uigradients.com/#SinCityRed */
.yourCustomButtonStyle {
  background-image: linear-gradient(90deg, #DD213A, #D3291E);
}

1.2 van-image

<!-- 宽度自适应，显示加载动画、失败提示 -->
<van-image
  custom-class="yourCustomImageStyle"
  fit="widthFix"
  use-loading-slot
  use-error-slot
>
  <van-loading
    slot="loading"
	type="spinner"
	size="40"
	color="#F29438"
	vertical
  />
  <text slot="error">图片加载失败</text>
</van-image>
<!-- 带上 width:100vw;min-height:100vh; 也可以全屏背景图 -->

2 image等

2.1 background

/* 全屏背景长图，宽度拉伸，长度截取 */
.home{
  min-height: 1460px; /* 屏幕小于1460px则取1460px */
  height: 100vh; /* 屏幕大于1460px则取100vh */
  background: url("") no-repeat;
  background-size: 100% auto; /* 宽度拉满，高度适应 */
}
.home::after,
.home:before {
  content: "";
  display: table;
  clear: both;
}

3 canvas等