uniapp下拉框指定预算被选中scroll-view示例

代码如下：

<template>  
  <view class="container">  
    <scroll-view class="scroll-view" scroll-y="true" @scroll="handleScroll">  
      <block v-for="(item, index) in list" :key="index">  
        <view class="item" :class="{ 'active': isActive(index) }">  
          {{ item.text }}  
        </view>  
      </block>  
    </scroll-view>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      list: Array.from({ length: 20 }, (_, i) => ({ text: `Item ${i + 1}` })),  
      activeIndex: 0, // 当前激活的列表项索引  
      itemHeight: 50, // 假设每个列表项的高度是50  
    };  
  },  
  methods: {  
    handleScroll(e) {  
      const { scrollTop } = e.detail;  
      this.activeIndex = Math.floor(scrollTop / this.itemHeight);  
    },  
    isActive(index) {  
      return index === this.activeIndex;  
    },  
  },  
};  
</script>  
  
<style>  
.scroll-view {  
  height: 300px;  
}  
.item {  
  height: 50px;  
  line-height: 50px;  
  text-align: center;  
  border-bottom: 1px solid #ccc;  
}  
.active {  
  color: red;  
}  
</style>