uni-app 阉割版的vue uni-app开发中的小坑。

如题，为何这么说呢，还是使用的过程中踩到的坑。

1.支付宝小程序不要在组件上直接加样式，要包一层view，不然不生效

 <view class="empty-class" v-if="isEmpty">
   <wjw-empty>wjw-empty>
 view>
1
2
3

不能

<wjw-empty class="empty-class" v-if="isEmpty">wjw-empty>
1

2. scroll-view
   scroll-y=“true” 竖向滑动 要加高度，一般需要动态style计算

    <scroll-view
      class="scrollView"
      :scroll-top="scrollTop" 
      scroll-y="true" 
      :scroll-into-view ="anchorId"
      @scroll="watchScroll"
      :style="{
        height: scrollHeight,
        marginTop: navBarHeight + 'px',
      }"
    >
1
2
3
4
5
6
7
8
9
10
11

scroll-x=“true”
横向滑动，子元素要有display:inline-block 否则滑动不了
scroll-view 要有 white-space：nowrap
即：

 scroll-view {
    white-space: nowrap;
    width: 100%;
 }
 item {
	display:inline-block
 }
1
2
3
4
5
6
7

scroll-view的内层view元素需要：
display: inline-block

scroll-view的外层元素需要：
white-space: nowrap

3. Prop传参 无法传递function

4. :style 不能直接支持 padding-bottom:${bottomPadding}rpx; 语法，需要定义变量传入

5. :style=‘animationElStatus’ 如果传入字符串，不能折行，且注意样式之间分号隔开。
   this.animationElStatus = top: ${endPoint.top}px; left: ${endPoint.left}px; transition: all 1s; transform: rotate(-720deg);

6. 如果类似H5那种 document.getElementById的话，

 let endPoint = null
 uni.createSelectorQuery().select('#id').boundingClientRect((res) => {
   endPoint = res
 }).exec()
1
2
3
4

注意要加exec不然不生效。