[uni-app笔记] 记uview中dropdown组件和scroll-view组件冲突的解决

最近在uni-app项目中用到了dropdown组件做筛选，与往常不同的是，筛选的选项条件都是动态读取出来的，个数很多，所以需要用scroll-view做滑动。但用了之后发现了问题，那就是scroll-view会把dropdown的弹层给隐藏掉。 因为scroll-view的编译后的代码是overflow:auto hidden;导致他的子内容都会隐藏。

本来的调用代码如下：

//mine.vue
<template>
  <view class="container">
    <scroll-view scroll-x>
	<u-dropdown>
		<u-dropdown-item :title="type.msg"
                    v-for="type in tagTypeList"   
                    :options="type.tags | fmtTags">
		</u-dropdown-item>
	</u-dropdown>
       </scroll-view>
  </view>
</template>

通过浏览器控制台观察生成的代码，我发现其实scroll-view并不需要将dropdown全部包裹起来，只要讲menu部分包裹起来让其可以滑动就可以了。而这种操作，在调用的页面里面是无法完成的，只有修改组件源码，所以我把项目中的uview-ui文件夹中的u-dropdown组件给改了一下，以适配我们的项目。 其实很简单，只不过将调用的地方的scoll-view挪到了u-dropdown组件内部:

// uview-ui/componens/u-dropdown.vue
<template>
    <view class="u-dropdown">
	<scroll-view scroll-x>
            <view class="u-dropdown__menu" >
		<view class="u-dropdown__menu__item" ...>
                    ...
		</view>
            </view>
        </scroll-view>
        ...
   </view>
</template>

// mine.vue
<template>
  <view class="container">
	<u-dropdown>
		<u-dropdown-item :title="type.msg"
                    v-for="type in tagTypeList"   
                    :options="type.tags | fmtTags">
		</u-dropdown-item>
	</u-dropdown>
  </view>
</template>

祝开卷有益。simbajs.com