当前位置: 首页 > article >正文

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>

http://www.kler.cn/a/133222.html

相关文章:

  • 计算2的N次方
  • Excel模板下载\数据导出
  • Python小试牛刀:第一次爬虫,获取国家编码名称
  • Apache Paimon、Apache Hudi、Apache Iceberg对比分析
  • 基于VUE实现语音通话:边录边转发送语言消息、 播放pcm 音频
  • 一文学会docker中搭建kali
  • 【2023年csp-j第二轮】第一题解析
  • 【算法挨揍日记】day29——139. 单词拆分、467. 环绕字符串中唯一的子字符串
  • 【设计一个缓存--针对各种类型的缓存】
  • 【数据分享】2023年我国省市县三级的专精特新“小巨人”企业数量(Excel/Shp格式)
  • 【LeetCode刷题-滑动窗口】-- 239.滑动窗口最大值
  • 【【萌新的SOC学习之 VDMA 彩条显示实验之一】】
  • 【RocketMq系列-01】RocketMq安装和基本概念
  • TG Pro v2.87(mac温度风扇速度控制工具)
  • 拒绝服务攻击工具的编写
  • 永久关机windows系统自动更新
  • linux时间调整
  • 使用记录-MongoDB
  • openai/chatgpt的api接口,各个模型的最大输入token一览表
  • 适用于全部安卓手机的 5 大免费 Android 数据恢复
  • 037、目标检测-算法速览
  • 「git 系列」git 如何存储代码的?
  • 6.9平衡二叉树(LC110-E)
  • WPF实现将鼠标悬浮在按钮上时弹出菜单
  • MyBatis逆向工程
  • 小型企业网络搭建方案