uniapp 小程序 scroll-into-view 完整代码

以下是一个uniapp小程序中使用scroll-into-view的完整代码示例：

<template>
  <view>
    <view class="box">
      <view class="btn">
        <block v-for="(item,index) in arry" :key="index">
          <button :class="leftIndex===index?'selected':''" @tap="scroll(index)">{{item}}</button>
        </block>
      </view>
      <scroll-view class="con" scroll-y="true" :scroll-into-view="rightIndex" scroll-with-animation>
        <view class="text" v-for="(item,index) in list" :key="index" :id="`right${index}`">{{item}}</view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      arry: \['按钮1', '按钮2', '按钮3', '按钮4', '按钮5'\],
      list: \['内容1', '内容2', '内容3', '内容4', '内容5'\],
      rightIndex: `right${0}`,
      leftIndex: 0
    }
  },
  methods: {
    scroll(index) {
      this.rightIndex = `right${index}`
      this.leftIndex = index
    }
  }
}
</script>

在这个示例中，我们使用了scroll-into-view来实现滚动到指定位置的效果。通过点击按钮，可以滚动到对应的内容位置。其中，`rightIndex`用于指定scroll-view滚动到的位置，`leftIndex`用于控制按钮的选中状态。
#### 引用[.reference_title]
- *1* *2* [uni-app和小程序中的scroll-view中的属性scroll-into-view的使用](https://blog.csdn.net/Beggarya/article/details/127421589)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]