vue 实现滑动和滚动

最新推荐文章于 2025-06-20 16:52:09 发布

小静仔

最新推荐文章于 2025-06-20 16:52:09 发布

阅读量6.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/shelbyandfxj/article/details/82287609

本文介绍如何在Vue中实现面板滑动效果，模仿iview Select组件。讲解了ev = ev || event的浏览器兼容性处理，以及解决touchstart、click事件冲突的方法，特别是针对微信网页的特殊处理。在滚动事件处理中，详细阐述了如何处理上滑、下滑逻辑，确保滚动和面板状态的正确切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

面板滑动效果，父组件是resultPanel，子组件是resultOption，仿照了iview中，Select组件的写法。

<template>
  <div v-if="visiable">
    <div class="transparent" :class="{active:resultPanelStatus==='top'}"></div>
    <div class="mapbox-result"
         ref="resultPanel"
         style="z-index: 101;"
         @touchstart="onTouchStart"
         @touchmove="onTouchMove"
         @touchend="onTouchEnd"
         :style="slideEffect"
    >
      <div class="mapbox-result-content">
        <a class="mapbox-result-close" v-if="closable" @click="close"></a>
        <div class="mapbox-result-header">
          <slot name="header">
            <div class="mapbox-result-header-title">共找到【{
  
  {header}}】相关{
  
  {total}}结果</div>
          </slot>
        </div>
        <div
          class="mapbox-result-body"
          ref="resultBody"
        >
          <result-option
            ref="option"
            v-for="(item, index) in data"
            :index="index+1"
            :name="item.name"
            :meter="item.meter?item.meter:0"
            :floor-name="item.floorName"
            :key="index"
            v-show="visiable"
            @on-click-gohere="handleNavigate(index)"
            @on-click-item="focusResultOnMap(index)"
          ></result-option>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import resultOption from './resultOption';

  export default {
    name: 'result-panel',
    components: {resultOption},
    props: {
      header: {
        type: String
      },
      // value: {
      //   type: Boolean,
      //   default: true
      // },
      closable: {
        type: Boolean,
        default: true
      },
      data: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        // visiable: true,
        resultPanelStatus: 'normal',    //'normal'、'top'
        cloneData: this.deepCopy(this.data),
        startY: 0,  // 开始触摸屏幕的点
        endY: 0,   // 离开屏幕的点
        moveY: 0,  // 滑动时的距离
        disY: 0,  // 移动距离
        slideEffect: ''      //滑动效果
      }
    },
    mounted() {
      // this.$refs.resultBody.style.height = `${this.defaultHeight - 60}px`;
      // this.$refs.resultBody.style.overflowY = 'hidden';
    },
    computed: {
      total() {
        return this.data.length;
      },
      defaultHeight() {
        return this.data.length > 3 ? 240 : this.data.length * 60 + 60        //当结果大于3时，默认只显示三个
      },
      visiable() {
        this.resultPanelStatus = 'normal';
        this.slideEffect = `transform: translateY(-${this.defaultHeight}px); transition: all .5s`;
        return this.$store.state.resultPanel.show;
      }
    },
    methods: {
      /**
       * 手指接触屏幕
       */
      onTouchStart(ev) {