uv-pick-color 拉起弹窗时拖动选择颜色时如何阻止遮罩层下的页面滚动

Question

代码如下：

<view class="select-color">
    <input type="hidden" v-model="item.value" style="height: 0px; line-height: 0px;min-height:0px">
    <view
        :title="colorTitle"
        style="{'background-color': (item.value !=='' || item.valur !== null) ? item.value : 'transparent','width':'40px','height':'40px','border':'1px solid #ec 
                ecec','borderRadius':'3px'}"
        @click="openColorPicker(val,index)"
    >
    </view>
</view>
<uv-pick-color ref="ColorPicker" :color="color" @confirm.stop="(e)=>confirm(e)" :prefab-color="[]" @touchmove.native.prevent.stop></uv-pick-color>
<script>
        // 调出颜色选择器
    const openColorPicker = (val,index) =>{
            state.idx = index
        currentInstance.ctx._.refs.ColorPicker.open();
    }
        // 颜色选择器保留rgba形式
    const confirm = (e) => {
        props.options.items[state.idx].value = 'rgba(' + e.rgba.r + ',' + e.rgba.g + ',' + e.rgba.b + ',' + e.rgba.a + ')'
    }
</script>

Answer 1

【以下回答由 GPT 生成】

要实现阻止遮罩层下的页面滚动，在拖动选择颜色时，可以通过以下步骤来实现：

1. 首先，给弹窗添加一个事件监听器，监听弹窗打开事件。 javascript const openColorPicker = (val, index) => { state.idx = index; currentInstance.ctx._.refs.ColorPicker.open(); window.addEventListener('touchmove', preventScroll, { passive: false }); };

2. 创建一个事件处理函数 preventScroll，用于阻止默认的滚动行为。 javascript const preventScroll = (event) => { event.preventDefault(); };

3. 给弹窗添加一个事件监听器，监听弹窗关闭事件。 javascript const confirm = (e) => { props.options.items[state.idx].value = 'rgba(' + e.rgba.r + ',' + e.rgba.g + ',' + e.rgba.b + ',' + e.rgba.a + ')'; window.removeEventListener('touchmove', preventScroll); };

4. 当弹窗关闭时，移除滚动的事件监听器。

下面是修改后的代码：

<view class="select-color">
  <input type="hidden" v-model="item.value" style="height: 0px; line-height: 0px;min-height:0px">
  <view :title="colorTitle" style="{{ {'background-color': (item.value !== '' || item.value !== null) ? item.value : 'transparent','width':'40px','height':'40px','border':'1px solid #ececec','borderRadius':'3px'} }}" @click="openColorPicker(val,index)"></view>
</view>
<uv-pick-color ref="ColorPicker" :color="color" @confirm.stop="(e) => confirm(e)" :prefab-color="[]" @touchmove.native.prevent.stop></uv-pick-color>
<script>
  // 调出颜色选择器
  const openColorPicker = (val, index) => {
    state.idx = index;
    currentInstance.ctx._.refs.ColorPicker.open();
    window.addEventListener('touchmove', preventScroll, { passive: false });
  };

  // 颜色选择器保留rgba形式
  const confirm = (e) => {
    props.options.items[state.idx].value = 'rgba(' + e.rgba.r + ',' + e.rgba.g + ',' + e.rgba.b + ',' + e.rgba.a + ')';
    window.removeEventListener('touchmove', preventScroll);
  };

  // 阻止默认滚动行为
  const preventScroll = (event) => {
    event.preventDefault();
  };
</script>

这样，在弹窗打开时，会添加一个滚动事件监听器，阻止页面的滚动行为；当弹窗关闭时，会移除该事件监听器，恢复页面的滚动行为。这样就可以实现阻止遮罩层下的页面滚动的功能。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^