uni-app小程序开发使用uView,u-model传入富文本内容过长,真机上无法滚动

uni-app小程序开发使用uView,u-model传入富文本内容过长,导致真机上无法滚动弹出框中内容。

解决方案:

找到u-model插件,在slot内容的外层自定义加入一个scroll-view标签,设置scroll-y="true",指定高度。

<template>
	<view>
		<u-popup :zoom="zoom" mode="center" :popup="false" :z-index="uZIndex" v-model="value" :length="width"
		 :mask-close-able="maskCloseAble" :border-radius="borderRadius" @close="popupClose" :negative-top="negativeTop">
			<view class="u-model">
				<view v-if="showTitle" class="u-model__title u-line-1" :style="[titleStyle]">{{ title }}</view>
				<view class="u-model__content">
						<view :style="[contentStyle]" v-if="$slots.default  || $slots.$default">
							<!-- 自定义加入scroll-view scroll-y="true" -->
							<scroll-view scroll-y="true" style="height: 1000rpx;">
								<slot />
							</scroll-view>
						</view>
					<view v-else class="u-model__content__message" :style="[contentStyle]">{{ content }}</view>
				</view>
				<view class="u-model__footer u-border-top" v-if="showCancelButton || showConfirmButton">
					<view v-if="showCancelButton" :hover-stay-time="100" hover-class="u-model__btn--hover" class="u-model__footer__button"
					 :style="[cancelBtnStyle]" @tap="cancel">
						{{cancelText}}
					</view>
					<view v-if="showConfirmButton || $slots['confirm-button']" :hover-stay-time="100" :hover-class="asyncClose ? 'none' : 'u-model__btn--hover'"
					 class="u-model__footer__button hairline-left" :style="[confirmBtnStyle]" @tap="confirm">
						<slot v-if="$slots['confirm-button']" name="confirm-button"></slot>
						<block v-else>
							<u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading>
							<block v-else>
								{{confirmText}}
							</block>
						</block>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

在page中的代码: 

		<u-modal v-model="show" :title="notice">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值