uview 组件遇到的问题以及响应的改造

uview组件版本 2.0.36

u-action-sheet 选项太多,占满屏幕,设置滚动

问题描述: u-action-sheet组件绑定的选项过多的时候,会充满全屏

解决方案: 设置滚动

  1. 找到文件 /uni_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue
  2. 找到 u-action-sheet__item-wrap 的类名(注意搜索时要精确匹配类名)
    <view class="u-action-sheet__item-wrap">
  3. 修改成
    <scroll-view class="u-action-sheet__item-wrap" scroll-y style="min-height: 100rpx;max-height: 700rpx;">
  4. 标签结尾的 </view> 也要替换成 </scroll-view>
  5. 可以重启项目看下!

替换的代码大致在 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>
相关推荐
C语言魔术师1 分钟前
【小游戏篇】三子棋游戏
前端·算法·游戏
匹马夕阳1 小时前
Vue 3中导航守卫(Navigation Guard)结合Axios实现token认证机制
前端·javascript·vue.js
你熬夜了吗?1 小时前
日历热力图,月度数据可视化图表(日活跃图、格子图)vue组件
前端·vue.js·信息可视化
桂月二二7 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
沈梦研8 小时前
【Vscode】Vscode不能执行vue脚本的原因及解决方法
ide·vue.js·vscode
hunter2062069 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb9 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角9 小时前
CSS 颜色
前端·css
轻口味9 小时前
Vue.js 组件之间的通信模式
vue.js
九酒9 小时前
从UI稿到代码优化,看Trae AI 编辑器如何帮助开发者提效
前端·trae