uview组件版本 2.0.36
u-action-sheet 选项太多,占满屏幕,设置滚动
问题描述: u-action-sheet组件绑定的选项过多的时候,会充满全屏
解决方案: 设置滚动
- 找到文件
/uni_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue
- 找到 u-action-sheet__item-wrap 的类名(注意搜索时要精确匹配类名)
<view class="u-action-sheet__item-wrap">
- 修改成
<scroll-view class="u-action-sheet__item-wrap" scroll-y style="min-height: 100rpx;max-height: 700rpx;">
- 标签结尾的
</view>
也要替换成</scroll-view>
- 可以重启项目看下!
替换的代码大致在 u-aciton-sheet.vue 组件的 35行左右,替换部分的代码大致如下:
vue
<slot>
<u-line v-if="description"></u-line>
<scroll-view class="u-action-sheet__item-wrap" scroll-y style="min-height: 100rpx;max-height: 700rpx;">
<!-- <view class="u-action-sheet__item-wrap"> -->
<template v-for="(item, index) in actions">
<!-- #ifdef MP -->
<button
:key="index"
class="u-reset-button"
:openType="item.openType"
@getuserinfo="onGetUserInfo"
@contact="onContact"
@getphonenumber="onGetPhoneNumber"
@error="onError"
@launchapp="onLaunchApp"
@opensetting="onOpenSetting"
:lang="lang"
:session-from="sessionFrom"
:send-message-title="sendMessageTitle"
:send-message-path="sendMessagePath"
:send-message-img="sendMessageImg"
:show-message-card="showMessageCard"
:app-parameter="appParameter"
@tap="selectHandler(index)"
:hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''"
>
<!-- #endif -->
<view
class="u-action-sheet__item-wrap__item"
@tap.stop="selectHandler(index)"
:hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''"
:hover-stay-time="150"
>
<template v-if="!item.loading">
<text
class="u-action-sheet__item-wrap__item__name"
:style="[itemStyle(index)]"
>{{ item.name }}</text>
<text
v-if="item.subname"
class="u-action-sheet__item-wrap__item__subname"
>{{ item.subname }}</text>
</template>
<u-loading-icon
v-else
custom-class="van-action-sheet__loading"
size="18"
mode="circle"
/>
</view>
<!-- #ifdef MP -->
</button>
<!-- #endif -->
<u-line v-if="index !== actions.length - 1"></u-line>
</template>
<!-- </view> -->
</scroll-view>
</slot>