微信小程序tips

单位

rpx

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx，宽度为20em。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

视图

1.view

<view hover-class="red">
.red{color:red}
类名可以自定义  之后在类里定义状态

2.scroll-view 滚动视图

容器
<scroll-view>
子项
<view>
横向滚动
<scroll-view scroll-x class='slide'>
    <view class='card'>1</view>
    <view class='card'>2</view>
    <view class='card'>3</view>
</scroll-view>

注意子项inline-block定宽高,滚动项不要用float,容器禁止折行

.slide{
    white-space:nowrap;
}
.card{
    display:inline-block;
}

scroll-left和scroll-top 值为number,是指初始化时已经滚动了多少

scroll-into-view="card2"
初始时显示id页

upper-threshold和lower-threshold，设置临界数值，触发scrolltoupper和scrolltolower事件
bindscrolltoupper用来绑定scrolltoupper事件

离顶部50px时跳转到Log页
<scroll-view upper-threshold="50" bindscrolltoupper="turnToLog">
//js
page({
 turntolog:function(){
    wx.navigateTo({
      url: '../logs/logs'
    })
  }
})

3.swiper

外部容器
<swiper>
子项，宽高自动为100%
<swiper-item>

4.可移动容器
movable-view在movable-able这个移动区域中移动
movable-view必须在movable-area组件中，并且必须是直接子节点

5.cover-view
由于原生控件处于顶层，想在canvas、video、map等上面添加按钮/元素，设置z-index是没用的，需要用<cover-view>

<!--注意cover-view要写在map里面，并且map里面只能用cover-view,不能用view-->
<map>
    <cover-view><cover-image></cover-image></cover-view>
</map>
<!--外面就用正常的view-->
<view></view>

注意在开发者工具上和真机上是不一样的，view始终会被原生控件覆盖或挤占