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.mzph.cn/news/146785.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

章鱼网络在 NEARCON23 发布 Octopus 2.0

香港时间2023年11月8日12点&#xff0c;章鱼网络举行第15期 Community Call。 我们在10月8日庆祝了章鱼网络主网上线二周年&#xff0c;并参加了激动人心的 Cosmoverse2023 活动。最重要的是&#xff0c;我们在 Octopus 2.0 的开发中取得了重大进展。 11月8日 Community Call …

vue3 - pinia 中的 storeToRefs

interface.d.ts文件 export interface useMyStore {id: stringcontent: stringtype: stringstatus: booleancollected: booleandate: stringquality: string }useMyStore.js文件 const msgData [{id: 123,content: 腾讯大厦一楼改造施工项目 已通过审核&#xff01;,type: 合…

SQLite3 数据库学习(二):SQLite 中的 SQL 语句详解

参考引用 SQLite 权威指南&#xff08;第二版&#xff09;SQLite3 入门 1. SQL 语句操作 SQLite 数据库 1.1 创建数据表格 create table 表名(字段名 数据类型&#xff0c; 字段名 数据类型&#xff0c; 字段名 数据类型&#xff0c; 字段名 数据类型); 命令行语句结束要加分…

装修干货|卧室常见3个软装搭配问题。福州中宅装饰,福州装修

引言 作为一名软装设计师&#xff0c;我对卧室的家具及软装布置颇有心得&#xff0c;现在就给你们带来卧室装修设计一些小技巧&#xff1a; 1. 床&#xff1b;衣柜&#xff1b;床头柜的摆放 床的摆放位置非常重要&#xff0c;一般要放在离窗户稍远的地方&#xff0c;避免直接…

Git客户端(TortoiseGit)使用

参考文章&#xff1a; https://www.cnblogs.com/xuwenjin/p/8573603.html 【精选】使用TortoiseGit工具进行开发&#xff08;连接远程仓库进行克隆、拉取、获取、提交、推送、新建/切换/合并分支、解决冲突&#xff09;_tortoisegit连接远程仓库-CSDN博客 tortoise git 拉取…

ReentrantLock源码浅析

一、ReentrantLock概念 ReentrantLock是JAVA并发情况下提供的用来加锁的机制&#xff0c;位于JUC包下&#xff0c;提供了一系列的加锁释放锁的方法&#xff0c;使用起来非常简单&#xff0c;只需要在代码块之前调用lock()方法&#xff0c;在finally中调用unlock()方法即可解决…

Postman接收列表、数组参数@RequestParam List<String> ids

示例如下: 接口定义如下: GetMapping(value "/queryNewMoviePath")public List<Map<String, Object>> queryNewMoviePath(RequestParam List<String> ids ) {return service.queryNewMoviePath(ids);}postman中测试如下&#xff1a; http://loc…

【Spring篇】使用注解进行开发

&#x1f38a;专栏【Spring】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【如愿】 &#x1f970;欢迎并且感谢大家指出小吉的问题 文章目录 &#x1f33a;原代码&#xff08;无注解&#xff09;&#x1f384;加上注解⭐两个注…

开发模型>螺旋模型

螺旋模型是在快速原型的基础上扩展而成的一种生存周期模型。这种模型将整个软件开发流程分成多个阶段&#xff0c;每个阶段都由4部分组成&#xff0c;它们是&#xff1a; ① 目标设定。为该项目进行需求分析&#xff0c;定义和确定这一个阶段的专门目标&#xff0c;指定对过程和…

分布式下多节点WebSocket消息收发

1、使用场景 2、疑问 第一次发送请求后&#xff0c;通过N1&#xff0c;W2&#xff0c;到达service2&#xff0c;建立websocket连接。 1、接下来发送的消息&#xff0c;通过Ngixn后和网关gateway后还能落在service2上面吗&#xff1f; 如果不能落在service2上&#xff0c;需要怎…

互联网医院系统:数字化时代中医疗服务的未来

随着数字化时代的发展&#xff0c;互联网医院系统在医疗服务中的作用日益凸显。本文将讨论互联网医院系统的一些关键技术方面&#xff0c;探讨这些技术如何推动医疗服务进入数字化时代。 1. 数据智能与个性化服务 互联网医院系统依赖于大数据分析和人工智能技术&#xff0c;…

python文件操作之xml转txt

在使用yolo进行深度学习训练时&#xff0c;我们所使用的标签文件都是txt格式的&#xff0c;但是有的人使用的标注软件生成的可能是xml文件&#xff0c;那么就需要使用python工具写一个格式转换脚本。 首先导入库&#xff0c;并定义标注的图片地址、生成的标签文件xml地址、存储…

Spring Boot使用EhCache完成一个缓存集群

在上一篇在SpringBoot中使用EhCache缓存&#xff0c;我们完成了在Spring Boot中完成了对EhCaChe的使用&#xff0c;这篇&#xff0c;我们将对EhCache的进一步了解&#xff0c;也就是搭建一个EhCache的缓存集群。 集群 在搭建一个EhCache的时候&#xff0c;我们需要先了解&…

2023-11-17 VsCode使用makefile进行多文件编译

点击 <C 语言编程核心突破> 快速C语言入门 VsCode使用makefile进行多文件编译 前言一、一个简单的多文件示例二、makefile基本语法三、VsCode使用makefile总结 前言 要解决问题: C或C可以多文件编译, 意味着需要进行代码组织, 为了方便多文件编译, gnu开发了make工具, …

2018年五一杯数学建模A题徐州潘安湖风景区游览路线设计解题全过程文档及程序

2019年五一杯数学建模 A题 徐州潘安湖风景区游览路线设计 原题再现 徐州是一个老工业基地和资源型城市&#xff0c;煤炭开采历史长达130年。长期煤炭开采在徐州累计形成采煤塌陷区达数十万亩。位于徐州市贾汪区西南部、紧邻马庄的潘安湖湿地公园原来就是徐州最大的、塌陷最严…

实验六:Android的网络编程基础

实验六&#xff1a;Android 的网络编程基础 6.1 实验目的 本次实验的目的是让大家熟悉 Android 开发中的如何获取天气预报&#xff0c;包括了 解和熟悉 WebView、WebService 使用、网络编程事件处理等内容。 6.2 实验要求 熟悉和掌握 WebView 使用 了解 Android 的网络编程…

Hadoop学习总结(MapRdeuce的词频统计)

MapRdeuce编程示例——词频统计 一、MapRdeuce的词频统计的过程 二、编程过程 1、Mapper 组件 WordcountMapper.java package com.itcast.mrdemo;import org.apache.hadoop.io.IntWritable; import org.apache.hadoop.io.LongWritable; import org.apache.hadoop.io.Text; …

网站页头被挂马状态及新增了index.html文件解决思路

今天网站刚新增了篇了文章《从nginx层阻断可执行的php 防止宝塔站点挂马》,整体测试下来还是不靠谱,设置后导致所有PHP文件都打不开了。 经过不断的查看日志和搜索办法总算告一段落,后续待观察。原因如下,多个网站目录新增了index.html文件,看时间是近两天上传的。 网站代…

微信小程序动态生成表单来啦!你再也不需要手写表单了!

dc-vant-form 由于我们在小程序上涉及到数据采集业务&#xff0c;需要经常使用表单&#xff0c;微信小程序的表单使用起来非常麻烦&#xff0c;数据和表单是分离的&#xff0c;每个输入框都需要做数据处理才能实现响应式数据&#xff0c;所以我开发了dc-vant-form&#xff0c;…

【开源】基于Vue.js的社区买菜系统的设计和实现

项目编号&#xff1a; S 011 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S011&#xff0c;文末获取源码。} 项目编号&#xff1a;S011&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.1.1 数据中心模块2.1…