微信小程序 常用样式

常用样式

1. view内文字居中：不需要给view设置宽度
   text-align: center;

2. 设置某一行文字与另一行文字的距离：
   需要给这两行文字都设置行高：行高=字的高度
   line-height:28rpx; 以及 font-size:28rpx;

3. 让子元素的图片居中：

<view class='paid_shop'>
   <view>即将到店</view>
   <image src='../../imgs/icon_phone@2x.png'></image>
</view>

给外边框的 paid_shop 设为flex布局之后 使用 align-items: center;就可以实现。

4. view内的文字垂直居中：

  height: 58rpx;
  line-height: 58rpx;

高度=行高

5. 给小程序设定主体颜色
   使用公共类名，然后在每一个用到这个颜色的地方使用这个类名，而不要使用单个写背景色以及颜色的方法。

/**app.wxss**/
/*主题色*/
.themeColor{color:#ffb12a;}
.themeBgcolor{background-color:#ffb12a;}

6. 小程序支持多个类名写在一起,用逗号隔开即可

.container,page{
  width: 100%;
  background: #ededed;
}

7. view下的image居中：
   主轴是水平方向时（就是默认的方向）：
   水平居中，设为 flex 布局：display:flex;(目前没发现需要兼容各个浏览器，所以先不写)，然后align-items:center;,即可。
   垂直居中，设为 flex 布局：display:flex;(目前没发现需要兼容各个浏览器，所以先不写)，然后justify-content: center;,即可。

样式的坑

1. 不要使用行内的背景图片相对路径设置，安卓不显示。

   
   小三角效果
   

   背景图片只能使用base64或者url格式的图片

2. 小程序使用图片名字有限制，不能使用非法字符，否则，即使开发者工具上正常显示，但是真机上无法显示。

   
   icon@2x.png正常显示
   icon_¥@2x.png真机无法显示
   

   具体有哪些字符属于非法的，还需要慢慢总结。

3 设置背景色
backgroundcolor在.json文件中设置，是没有用的。

page{
  width:100%;
  height:100%;
}
.container{
  background-color: #f3f3f3;
  width:100%;
  height:100%;
}

直接设置margin 有的时候竟然无效。

4 input输入框的几个属性

5 让元素居中的方式

image.png

让这个大白块居中：

.mask{
  width:100%;
  height:100%;
  position:fixed;
  background-color:#999;
  z-index:9999;
  top:0;
  left:0;
  opacity:0.5;
}
.main{
  width:555rpx;
  height:572rpx;
  background-color: #fff;
  border-radius: 12rpx;
  position:fixed;
  z-index: 99999;
  top:50%;
  margin-top:-286rpx;
  left:50%;
  margin-left:-277rpx;
  
}

一句话：top 50%,margin-top=负的自身高度的一半。宽度也是这样，然后就可以实现居中。

6 css渐变 线性渐变
background: linear-gradient(-18deg, #ffaf25, #ffc259);

• 注意的点：
  +可以使用backgroud但是不能使用background-color.

7 中间虚线以及两个半圆的实现：

分割线

wxml:
<view class='m2'>
      <view class='m2_tit'>电话挪车券</view>
      <view class="coupon-line">
        <view></view>
        <view></view>
      </view>
    </view>
wxss:
.m2{
  margin:33rpx auto 44rpx auto;
  width:445rpx;
  height:199rpx;
  background: linear-gradient(-18deg, #ffaf25, #ffc259);
  border-radius: 12rpx;
}
.m2_tit{
  font-size:30rpx;
  color:#fff;
  margin-left:32rpx;
  padding-top:26rpx;
  margin-bottom:21rpx;
}

.coupon-line{
  position:relative;
  width:418rpx;
  margin:auto;
  border-top:4rpx dashed #fff;
}
.coupon-line view{
  width:28rpx;
  height:28rpx;
  background:#fff;
  border-radius:50%;
  position:absolute;
  z-index:99;
  top:-14rpx;
}
.coupon-line :first-child{
  left:-28rpx;
}
.coupon-line :last-child{
  right:-28rpx;
}