Recently, the Dropdown component was used in the Uni-App project for screening. What is different is that the selection conditions are dynamically read with a large number, so scroll View is needed for sliding. But the problem is that the scroll view will hide the elastic layer of dropdown. Because the compiled code for scroll view is overflow: Auto Hidden; Causes his child content to be hidden.

The original call code is as follows:

//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>
Copy the code

Looking at the generated code in the browser console, I found that the Scroll view doesn’t need to be completely wrapped around the dropdown, just wrap the menu part so that it can slide. However, this operation can not be completed in the page called, only to modify the source of the component, so I changed the U-Dropdown component in the uVIEW-UI folder of the project to fit our project. The u-Dropdown component will be called from the local scoll-view:

// 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>
Copy the code

Good luck opening the book. simbajs.com