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行左右,替换部分的代码大致如下:
<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 --><viewclass="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"><textclass="u-action-sheet__item-wrap__item__name":style="[itemStyle(index)]">{{ item.name }}</text><textv-if="item.subname"class="u-action-sheet__item-wrap__item__subname">{{ item.subname }}</text></template><u-loading-iconv-elsecustom-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>