第一次使用uni-app进行小程序开发，总结以下两点遇见的问题及解决办法。

犯错让你更聪明————德国寓言

scroll-into-view属性无效?

当需要在小程序中点击某个元素滚动到另外一个元素，那么你可以使用scroll-view中的scroll-into-view属性。当scroll-into-view属性不生效，应该如何解决？

生效条件：

1. 竖向滚动时，需要给 scroll-view 一个固定高度；
2. scroll-into-view：标记一个不能以数字开头的子元素，必须在scroll-view同一级，而不是子元素内部。

id属性设置在组件内部，不生效。原因可能和uni.createSelectorQuery()有关 （如下）。

  <scroll-view :scroll-into-view="scrollIntoView">
    <todo-list v-for="item in list"></todo-list>  
  </scroll-view>
  
  <!-- id在组件内部 设置scrollIntoView不会生效 -->
  <todo-list :id=`todo-${index}`></todo-list>

id属性设置在组件外层，和scroll-view同级，生效。

  <scroll-view :scroll-into-view="scrollIntoView">
    <todo-list :id=`todo-${index}` v-for="item in list"></todo-list>  
  </scroll-view>

如何实现一个Popup

uni-app中没有vue的transition组件，那么如何手动实现一个Popup等交互组件？

上才艺，uni.createAnimation() ，创建一个动画实例 Animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的animation属性。

准备

 <view :animation="animationData" v-if="show">
   <slot></slot>
 </view>

创建一个Animation实例

  this.animation = uni.createAnimation({
    duration: 300 // 动画持续时间
    timingfunction: 'ease' // 动画的效果， 
  })

如何描述开始和关闭动画

Animation主要描述transform的属性值、opacity、backgroundColor、width、height等常用基础属性。MDN描述的可动画属性大部分不支持。

step 方法： 表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。

export 导出动画队列，设置animation。export 方法每次调用后会清掉之前的动画操作。

举个例子：从下往上的drawer动画（animation.translateY）。

  function open () {
    this.show = true
    // 当dom加载之后才进行animation的描述
    setTimeout(() => {
      this.animation.translateY(0).step() // 动画完成
      this.animationData = this.animation.export() // 导出动画，并设置animationData
    }, 50)
  }
  
  function close () {
    this.animation.translate('100%').step()
    this.animationData = this.animation.export()
    setTimeout(() => {
      this.show = false
    }, 300) // 动画完成后再隐藏dom
  }
  
  // 当组件modelVal变化后，则更新动画
  if (modelVal) {
    this.open()
  } else {
    this.close()
  }

如果需要加个遮罩<Overlay>，将动画更新为opacity就可以了。

  animation.opacity(100) => animation.opcaity(0)

简单的popup就完成了。

<view>
  <Overlay :show="showPopup"></Overlay>
  <Popup :show="showPopup"></Popup>
</view>

结语

本次uni-app开发的细节就介绍到这里，希望能给大家带来一些收获。如有问题，请大家指点。