小程序日常开发经验总结

label组件

label 用来改进表单控件的可用性 例如里面嵌套 radio 点击整个label 的时候都能选中 radio 控件

垂直居中一个图片

{
display:table-cell;
text-align:center;
vertical-align:middle;
}

垂直居中一个元素

• 最原始的。宽高写死。line-height 等于元素的高速
• 绝对定位 宽高写死
• flex 布局 display:flex; justify-content:center; aligb-item:center;
• 父元素 display:table; 子元素 display:table-cell; vertical-align:middle;原理是 display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，然后就像在表格里一样，给子元素加个vertical-align: middle就行了,多行文字垂直居中啦

.product-tr:last-child() 对比 .product-tr :last-child

.product-tr:last-child() 表示 是类名为 product-tr，同时又是最后一个孩子
.product-tr :last-child 中间有一个空格 表示 类名为product-tr 的最后一个孩子

.product-tr:last-child .th,.product-tr:last-child .td{
  border-bottom: none;
}

.product-tr :last-child{
  border-right: none;
}

用 box-shadow 代替 border (否则会有边框的像素显示与隐藏。会挤掉其他的控件。点击的时候会有 挪动一像素的问题)

.bor {
  box-shadow: 0 0 0 2rpx #15bf5d;
}

新能源汽车车牌号码规则常识：

虚线：border: 1rpx dashed #ccc;

mask显示与否逻辑范例（自定义遮罩层显示与隐藏）

css文件 .只要是没有写display:none; 那就是默认是显示的
.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .6);
  z-index: 1;
}

html 文件中 只有isAn 值是真的时候，才显示mask 否则不显示

<view class="{{isAn?'mask':''}}" ></view>

每个页面的分享展示 可以在app.js中全局配置（项目中每个页面都有分享信息）

  onShareAppMessage() {
    return {
      bgImgUrl: '/img/share.png',
      title: '高速ETC',
      path: '/page/index/index'
    };
  },

随机选取 min-max之间的数 固定公式

var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);

使用forEach遍历对象

res.data.message.forEach((item, index) => {
    if (item.id == '11') {
    res.data.message.splice(index, 1)
  }
})

尽量不要使用margin 而是使用padding代替，小程序中会很容易出现页面的滑动

form 组件在页面中的设置样式是不管用的！！！