一些前端知识

1.子绝父相
子视图绝对布局,
父视图相对布局。
示例

<view class="login-wrapper">
    <image />
    <view class="aaaaa">这是一个viewh</view>
</view>

.login-wrapper {
  /* background-color: #f00; */
  height: 400rpx;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  z-index: -1;
}

.login-wrapper image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: aqua;
  z-index: -1;
}
.login-wrapper aaaaa {
  top: 0;
  left: 0rpx;
  width: 100rpx;
  height: 40rpx;
  background-color: blue;
  position: absolute;
}

实际效果图

image.png

列表渲染：

<view wx:for="{{[11,22,33,44,55]}}">
    位置为{{index}}的元素是{{item}}
</view>
<block wx:for="{{[11,22,33,44,55]}}">
位置为{{index}}的元素是{{item}}
</block>

两种的区别是,一种循环整个的,一种只循环里面的.

image.png

给view扩展属性，直接可以给view加data

<view class="aaaaa" data-aaa = "123">这是一个viewh</view>

取出view里面的数据：
取事件evt里面dataset里面的aaa evt.currentTarget.dataset.aaa

条件渲染：

<view wx:if="{{isHidden }}" >这是一个viewh</view>

封装扩展方法：也可以单独抽出来一个类：

image.png