vue移动端滚动选择器的实现

滚动选择器的实现

前两天在公司用vue开发移动端的项目，遇到一个功能，要求弹出一个选择器，默认选中中间的值，要求选中的值跟着滚动改变，由于没有外网，只能自己开发一个来实现这个需求。第一次写博客，写的不好，勿喷~

代码如下：

<template>
  <div class="picker-main">
    <button @click="showPicker()">选择器</button>
    <span>{
   {
   city}}</span>
    <div
      v-if="show"
      class="picker"
    >
      <section class="picker-main">
        <h3>
          <span @click="show = false">取消</span>
          <span>请选择</span>
          <span @click="sure()">确认</span>
        </h3>
        <ul ref="ul">
          <li
            v-for="(item, index) in list"
            :key="index"
            :class="active==item.id?'active':active==item.id-1||active==item.id+1?'active2':null"
            :ref="'li'+item.label"
          >{
   {
   item.val}}</li>
        </ul>
      </section>
    </div>
  </div>
</template>

<script>
export default {
   
  data(