微信小程序学习笔记（二）

1、overflow

overflow: hidden;

超出部分需要截取类似iOS makestobounds 的性质，适用场景就像父视图设置圆角以后子视图并没有设置，依然看不到圆角的效果，这时就需要这个属性。

2、微信小程序 CSS 选择器::after和::before的简单使用

前两天看文档看到选择器那块儿的时候，前面4个基本都能理解：.class，#id，element，element, element，但后面两个::after和::before（文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解。于是上网仔细查了下。以下是笔记

wxml

    {{price}}

wxss

.container {
  width: auto;
  margin: 30rpx;
  background-color: #fff;
  text-align: center;
}
 
.price {
  position: relative;
  display: inline-block;
  font-size: 78rpx;
  color: red;
}
 
.price::before {
  content: "金额：¥";
  position: absolute;
  font-size: 40rpx;
  top: 30rpx;
  left: -160rpx;
  color: black;
}
 
.price::after {
  content: ".00 元";
  font-size: 30rpx;
  top: 40rpx;
  position: absolute;
  right: -90rpx;
  color: black;
}

js

Page({
  onLoad: function() {
    this.setData({
      price: 100
    })
  }
})

效果

13.jpg

3、wxml 里面用到js的变量问题

    预约成功！

{{}}双括号里面一定是变量，若里面内容有不是变量的需要用引号引起来，以示区别（eg：?"34b74a":"ff4e00"）。

4、给view添加背景图片的问题：

一般有两种方法:

background-image: url(https://xxx/xxx.pmg);

background-image: url(转换之后的base64字符串);

有时候图片不会按照比例适应，需要用到下面这个方法

background-size: cover;//**cover按照比例添加**
background-size: 65rpx 45rpx; //设置宽高
background-repeat: no-repeat;//不铺满
background-position: 90% 5%;//设置坐标（这里坐标可以是rpx，也可以是百分比，还可以是top right这样设置）

5、设置父view透明度

background-color: rgba(255, 255, 255, 0.8);
opacity: 0.8; 

这两个属性其实都可以，但是用第一个设置的话父view中的子view透明度不会跟着改变，第二个会跟着改变，推荐第一个。

6、小程序display属性区别

display:inline 转化成内联元素，不换行；
display:block转换成块元素，换行；
display:inline-block内联块元素，既不换行又可以使用块元素所拥有的属性，类似于块元素加了浮动效果，但低版本浏览器对这个不支持。

7、wxml里面 数组和字典的判断

数组一般可以用length来判断，字典目前没有发现特别好的方法，我是同时判断字典和字典里面的字段是否同时存在：

requestData.lightService && requestData.lightService.newsTypeId

8、去掉弹性效果

json中添加 disablescroll ：true

9、禁止滑动

catchtouchmove ：true

9、flex属性的解析

flex-grow 当有多余控件时，元素的放大比例

默认为0，即如果存在剩余空间，也不放大
如果所有元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个元素的flex-grow属性为2，其他元素都为1，则前者占据的剩余空间将比其他元素多一倍。

flex-shrink 当空间不足时，元素的缩小比例
默认为1，即如果空间不足，该元素将缩小
如果所有元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个元素的flex-shrink属性为0，其他元素都为1，则空间不足时，前者不缩小。和flex-grow用法基本一致

flex-basis 元素在主轴上占据的空间
它可以设为跟width或height属性一样的值（比如350px），则元素将占据固定空间。

flex 是grow shrink basis的简写
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex: 0 1 50px

10、css中高度设置的场景

当我们一个界面中，上面是滑动的区域，底部是固定的UI，此时我们设置上面区域的高度可通过100%-底部高度就可以了，具体实现：
height: calc(100% - 40px);