VUE阻止Picker插件上下拖动事件冒泡

其他环境
¥20.00
vue中使用picker插件做省市县三级级联,上下拖动时总是会带动页面上下滑动,应该是上下拖动事件冒泡导致的。有没有什么解决方案可以阻止Picker插件上下拖动事件冒泡呢


最佳答案

防止滚动穿透 只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件就可以了,

native是关键,这个表示根元素的意思,也就是body或者html



阻止picker组件内滑动事件冒泡


<template>
  <view class="lb-multi-selector lb-picker-item"
	@touchmove.native.stop.prevent
    :style="{ height: height }">
    <picker-view :value="pickerValue"
      :indicator-style="indicatorStyle"
      :style="{ height: height }"
      @change="handleChange">
      <picker-view-column v-for="(column, index) in pickerColumns"
        :key="index">
        <view v-for="(item, i) in column || []"
          :class="[
            'lb-picker-column',
            item[props.value] === selectValue[index]
              ? 'lb-picker-column-active'
              : ''
          ]"
          :key="i">
          <text class="lb-picker-column-label">
            {{ item[props.label] || item }}
          </text>
        </view>
      </picker-view-column>
    </picker-view>
  </view>
</template>


屏蔽确定栏的拖动事件:

<view class="lb-picker-header-actions"  @touchmove.native.stop.prevent>
					<view class="lb-picker-action lb-picker-left">
						<!-- 取消 -->
						<view class="lb-picker-action-item lb-picker-action-cancel" @tap.stop="handleCancel">
							<slot v-if="$slots['cancel-text']" name="cancel-text">
							</slot>
							<text v-else class="lb-picker-action-cancel-text" :style="{ color: cancelColor }">
								{{ cancelText }}
							</text>
						</view>
					</view>

					<!-- 中间 -->
					<view class="lb-picker-action lb-picker-center" v-if="$slots['action-center']">
						<slot name="action-center"></slot>
					</view>

					<!-- 确定 -->
					<view class="lb-picker-action lb-picker-right">
						<view class="lb-picker-action-item lb-picker-action-confirm" @tap.stop="handleConfirm">
							<slot v-if="$slots['confirm-text']" name="confirm-text"> </slot>
							<text v-else class="lb-picker-action-confirm-text" :style="{ color: confirmColor }">
								{{ confirmText }}
							</text>
						</view>
					</view>
				</view>


Only efforts T0 被采纳率50%
2021-01-19 17:03
打赏 1 0
页面统计
145 访问
1 帮助
0.00 打赏

hierror 2019 © hierror.com 京ICP备13026190号-1

通知消息
  • 暂无任何消息