上面文本部分,如果超出了,可以上下滑动,而搜索框不动。
思想:在popup里面添加scroll-view,可上下或者左右滑动。
<template>
<view>
<button type="default" @click="open">打开</button>
<u-popup v-model="popup" mode="center" border-radius="15" width="70%" height="400px">
<view class="wllw-width90 wllw-m-auto u-p-t-30">
<u-search v-model="hy_keyword" placeholder="搜索"></u-search>
</view>
<view class="u-m-t-30">
<scroll-view scroll-y="true" style="height: 620rpx;width: 90%;margin: 0 auto;">
<view>
<view style="margin: 20rpx;" v-for="(item,index) in hy_list" :key="index" >{{ item.label }}</view>
</view>
</scroll-view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
hy_keyword:'',
popup:false,
hy_list: [
{
value: '1',
label: '总经理'
},
{
value: '2',
label: '总裁'
},
{
value: '3',
label: 'CEO'
},
{
value: '4',
label: '副总经理'
},
{
value: '5',
label: '人力资源总监'
},
{
value: '5',
label: '人力资源总监'
},
{
value: '5',
label: '人力资源总监'
},
{
value: '5',
label: '人力资源总监'
},
{
value: '5',
label: '人力资源总监'
},
{
value: '5',
label: '人力资源总监'
},
{
value: '5',
label: '人力资源总监'
},
{
value: '5',
label: '人力资源总监'
},
{
value: '5',
label: '人力资源总监'
},
{
value: '5',
label: '人力资源总监'
},
{
value: '5',
label: '人力资源总监'
},
{
value: '5',
label: '人力资源总监'
},
],
}
},
methods: {
open(){
this.popup=true
}
}
}
</script>