vue 实现 ios 原生picker 效果及实现思路解析

下面我将为你详细讲解“vue 实现 ios 原生picker 效果及实现思路解析”的完整攻略。

标题

如何实现ios原生picker效果

在Vue中，实现ios原生picker效果主要是通过借助第三方插件picker-component来完成。picker-component是一个基于Vue的picker组件，实现了iphone风格的列表场景。在使用时，我们只需要按照Vue的组件方式把picker-component放在页面中，并传入需要显示的数据等参数即可。
在这里，我们将详细介绍picker-component的使用方法及实现原理。

picker-component使用示例

1. 安装和引入

首先我们需要使用npm安装picker-component：

npm install picker-component -S

接着，我们可以将其引入到项目中。在Vue的main.js中添加如下代码：

import Vue from 'vue'
import Picker from 'picker-component'

Vue.component('Picker', Picker)

2. 基本使用方法

假设我们有一个需求：在页面中拉出一个列表，里面的数据是从服务器端获取的。我们可以按照如下代码实现：

<template>
  <div>
    <picker v-model="selected" :columns="columns"></picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      columns: [
        {
          values: ['选项1', '选项2', '选项3', '选项4', '选项5']
        }
      ]
    }
  }
}
</script>

上面的代码中，我们使用了picker-component的v-model来进行数据双向绑定，并通过columns参数指定了需要显示的数据。此时打开页面，就会看到一个类似ios原生picker的滚动列表了。

3. 自定义列数和列数据

除了只显示单列数据，我们还可以在使用时自定义列数和每列的数据。这个时候，我们可以这样来写：

<template>
  <div>
    <picker v-model="selected" :columns="columns"></picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      columns: [
        {
          values: ['选项1', '选项2', '选项3', '选项4', '选项5']
        },
        {
          values: ['选项1', '选项2', '选项3', '选项4', '选项5']
        },
        {
          values: ['选项1', '选项2', '选项3', '选项4', '选项5']
        }
      ]
    }
  }
}
</script>

在上面的代码中，我们将columns参数包含了三个对象，每个对象代表了一个列表。每个对象中的values参数用来指定该列表中需要显示的内容。用上面的代码测试一下，你会看到页面上出现了三个滚动的列表。

实现思路解析

上面是使用picker-component实现ios原生picker效果的具体代码，接下来，我们将通过分析picker-component的源码，来解析其实现思路。

picker-component的基本结构

先看一下picker-component的基本结构：

<template>
  <div class="picker-container" @touchmove.prevent @touchend.prevent.stop="touchEnd">
    <div class="picker-mask" ref="mask"></div>
    <div class="picker-wrapper" ref="wrapper" @touchmove.prevent.stop="touchMove">
      <div class="picker-toolbar">
        <span class="picker-cancel" @click="hide">{{ cancelText }}</span>
        <span class="picker-title">{{ title }}</span>
        <span class="picker-submit" @click="submit">{{ submitText }}</span>
      </div>
      <div class="picker-content">
        <div class="picker-item" v-for="column in columns" :style="{ width: calc(100% / columns.length) }">
          <ul class="picker-wheel" ref="wheel" :data-index="columnIndex">
            <li v-for="(value, index) in column.values"
                :class="{ 'picker-wheel-item-selected': selectedIndex === index }"
                @click="select(index)">
              {{ value }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

在上面的代码中，我们可以看到picker-component的基础结构。其中，最上层的div即为容器，包含了整个组件的内容。容器中的picker-mask用于遮罩列表内容，并阻止用户在未选择的情况下点击屏幕。picker-wrapper用于包含整个滚动列表，而picker-content则包含了所有picker-item。说简单一点，整个结构其实就是：容器→遮罩→滚动列表。

picker-component的逻辑实现

再来看一下picker-component的逻辑实现：

<script>
export default {
  name: 'picker',
  props: {
    title: String,
    cancelText: {
      type: String,
      default: '取消'
    },
    submitText: {
      type: String,
      default: '确定'
    },
    columns: Array,
    value: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data() {
    return {
      selectedIndex: -1,
      init: true,
      scrollY: null,
      startY: null,
      columnIndexes: [],
      startValues: [],
      nowPosY: 0,
      distance: 0,
      translateY: 0,
      timestamp: 0,
      frame: 0
    }
  },
  watch: {
    value(val) {
      this.setValues(val)
    }
  },
  methods: {
    show() {},
    hide() {},
    onTouchStart(event) {},
    onTouchMove(event) {},
    onTouchEnd(event) {},
    setValues(val) {},
    onColumnChange(columnIndex) {}
  }
}
</script>

在上面的代码中，我们可以看到，picker-component主要包含了一些参数和方法。其中，props用于组件间传递参数；data则用于存储一些组件内部的数据；watch用于监听this.value的变化（this.value代表该组件的当前值，使用双向绑定的方式与父组件进行交互）；而methods则包含了show、hide、onTouchStart等各种方法，用于实现组件的具体逻辑。

具体来讲，picker-component的逻辑实现过程如下：

1. 用户点击picker-component，调用show()方法，在容器中显示滚动列表；
2. 用户选择并确认了某个值后，调用hide()方法，隐藏列表，并向父组件传递选中的值；
3. 当用户开始触摸屏幕时，调用onTouchStart()方法，并记录一些滚动列表开始的参数；
4. 当用户滑动滚动列表时，调用onTouchMove()方法，处理并更新列表的位置；
5. 当用户结束触摸屏幕时，调用onTouchEnd()方法，计算出应该停留在哪个位置，并更新选中值；
6. 定义setValues()方法，用于初始值的赋值；
7. 定义onColumnChange()方法，用于监听列改变的情况。

结论

以上就是关于“vue 实现 ios 原生picker 效果及实现思路解析”的完整攻略。使用picker-component可以很方便地实现ios原生picker效果，并且其内部的实现原理也很值得我们深入了解。希望这篇攻略对你有所帮助！