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>
相关推荐
MXN_小南学前端5 分钟前
Vue 后台管理系统:封装通用el-table导出方法(附完整源码)
javascript·vue.js
2601_957786776 分钟前
企业矩阵运营的“三段论“:管号、产内容、获线索——全链路系统的价值拆解
java·前端·矩阵·多平台管理
一 乐12 分钟前
公交线路查询系统|基于Java+vue公交线路查询系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·公交线路查询系统
i220818 Faiz Ul21 分钟前
相亲网站|相亲网站系统|基于Java+vue相亲网站系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·相亲网站系统
城市的稻草人VS24 分钟前
rust【日志库】
前端·rust
问心无愧051331 分钟前
ctf show web 入门258
android·前端·笔记
qq_25183645736 分钟前
基于java Web 耗材购置与维修网络申报审批系统设计与实现
java·开发语言·前端
UXbot37 分钟前
企业AI开发工具:界面自动生成与前端代码交付能力详解
前端·人工智能·交互·web app·ui设计
专业技术员!!!!37 分钟前
陪玩系统前端核心功能详解|线上线下陪玩平台开发方案
前端·陪玩系统·电竞陪玩
英俊潇洒美少年38 分钟前
前端主流状态管理全家桶:Vuex/Pinia/Redux/Zustand/MobX 从入门到原理、实战、面试全解
前端·面试·职场和发展