背景
今天，在制作微信小程序時，發現，彈出框內的下拉框內容被遮擋。
怎樣才能讓下拉的內容不被遮擋，這是一個問題。於是我想出了兩個解決方案。
- 把下拉框的彈出內容方到上面去。
- 改變彈出框的樣式，讓它溢出的下拉框內容可見。
第一個方案，近期有時間，我自個更新一下插件；第二個方案，現在就用它解決了。
解決過程
經過調試。不顯示彈出框的overflow，下拉框就不會被隱藏了。
於是，這里先簡單的為其更改overflow屬性。
1 <view class="cu-modal " :class="ModalName ? 'show' : '' " @tap="hideModal"> 2 <!-- overflow: visible 用於下拉框部分被隱藏的問題 --> 3 <view class="cu-dialog" style="overflow: visible;" @tap.stop=""> 4 <!-- 隱藏其他無關代碼 --> 5 </view> 6 </view>
接下來，還是要說明一下overflow。
瀏覽器支持
表格中的數字注明了完全支持該屬性的首個瀏覽器版本。
| 屬性 | Chrome | IE | Firefox | Safari | Opera |
| overflow | 1.0 | 1.0 | 1.0 | 1.0 | 1.0 |
定義和用法
overflow屬性規定內容溢出元素框時發生的事情。
說明
這個屬性定義溢出元素內容區的內容會如何處理。如果值為scroll，不論是否需要，用戶處理隊徽提供一種滾動機制，因此，有可能即使元素框中可用放下所有內容也會出現滾動條。
| 默認值: | visible |
| 繼承性: | no |
| 版本： | CSS2 |
| JavaScript語法： | object.style.overflow="scroll" |
可能的值
| 值 | 描述 |
| visible | 默認值。內容不會被修剪，會呈現在元素之外。 |
| hidden | 內容會被修剪，並且其余內容不可見的。 |
| scroll | 內容會被修剪，但瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規定應從父元素繼承overflow屬性的值。 |