nvue中滚动到列表某个指定项

dom 模块用于对 weex 页面里的组件节点进行一部分特定操作。

• scrollToElement 将 list 的某个子节点滚动到当前视口
• getComponentRect 获取某个组件的 bounding rect 布局信息
• addRule 添加 font-face rule
• getLayoutDirection0.20.0+ 获取某个组件的布局方向（rtl、lrt、inherit）

让页面滚动到 ref 对应的组件，这个 API 只能用于可滚动组件的子节点，例如 ，,  等可滚动组件中。

scrollToElement(ref, options)

• @ref，要滚动到的那个节点。
• @options
  • offset，一个到其可见位置的偏移距离，默认是 0。
  • animated，是否需要附带滚动动画，默认是 true。

参考示例

<template>
  <div class="wrapper">
    <scroller class="scroller">
      <div class="row" v-for="(name, index) in rows" :ref="'item'+index">
        <text class="text" :ref="'text'+index">{{name}}</text>
      </div>
    </scroller>
    <div class="group">
      <text @click="goto10" class="button">Go to 10</text>
      <text @click="goto20" class="button">Go to 20</text>
    </div>
  </div>
</template>

<script>
  const dom = weex.requireModule('dom')

  export default {
    data () {
      return {
        rows: []
      }
    },
    created () {
      for (let i = 0; i < 30; i++) {
        this.rows.push('row ' + i)
      }
    },
    methods: {
      goto10 (count) {
        const el = this.$refs.item10[0]
        dom.scrollToElement(el, {})
      },
      goto20 (count) {
        const el = this.$refs.item20[0]
        dom.scrollToElement(el, { offset: 0 })
      }
    }
  }
</script>

<style scoped>
  .scroller {
    width: 700px;
    height: 700px;
    border-width: 3px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    margin-left: 25px;
  }
  .row {
    height: 100px;
    flex-direction: column;
    justify-content: center;
    padding-left: 30px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #DDDDDD;
  }
  .text {
    font-size: 45px;
    color: #666666;
  }
  .group {
    flex-direction: row;
    /*justify-content: space-around;*/
    justify-content: center;
    margin-top: 60px;
  }
  .button {
    width: 200px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 40px;
    margin-left: 30px;
    margin-right: 30px;
    text-align: center;
    color: #41B883;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
  }
</style>

参考：http://emas.weex.io/zh/docs/modules/dom.html#scrolltoelement