uni-app开发小程序，利用scroll-view实现自动滚动至对应数据

晨的一朵云

已于 2023-03-07 15:59:14 修改

阅读量5.1k

点赞数 2

文章标签：小程序 vue.js uni-app javascript

于 2022-01-30 11:44:31 首次发布

本文链接：https://blog.csdn.net/m0_61387674/article/details/122751501

版权

scroll-view 组件：可滚动视图区域。用于区域滚动。需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

官方API：uni-app官网

自动滚动到高亮序号（scroll-view的scroll-into-view+对应id值）

vue文件内容：

dom: 
  <scroll-view scroll-y :scroll-into-view="seqToView">
    <view class="pop-scroll">
      <view
        v-for="(item,index) in seqList"
        :id="'seq-' + item"
        :key="index"
        class="pop-seq"
        :class="seqIndex === index ? 'active' : ''"
        @click="selSeq(item,index)"
      >
        <text>{{ item }}</text>
      </view>
    </view>
  </scroll-view>

滚动若太生硬，可加滚动过度效果属性 scroll-with-animation="true"

data: 
  seqToView: '' // 滚动至序号

js: 
  this.seqToView = 'seq-' + this.queNum // 滚动至选中序号位置