【微信小程序】小程序模态框里面的问题换行问题

最新推荐文章于 2024-07-02 16:44:34 发布
最新推荐文章于 2024-07-02 16:44:34 发布
阅读量1.5k 收藏
点赞数 2
分类专栏： 微信小程序 文章标签： 微信小程序 showModal 模态框 模态框文字换行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37949737/article/details/102678227
版权
在微信小程序开发中，遇到模态框(showModal)内的文字换行问题。通过在需要换行的地方添加` `，可以解决此问题。虽然在开发工具中无法预览效果，但真机上能正常显示换行。
摘要由CSDN通过智能技术生成

写项目的时候使用到了小程序提供的模态框，但是文字换行问题一直有问题。

设计稿

模态框

找了好久终于找到了一个可以实现换行的办法就是在你需要换行的添加 \r\n就可以了 ，下面来看下效果图   

注释：还有一点在工具里面还是看不出来效果的，只有在真机上面才能看到效果图

 

上帝把我扔在人间
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
微信小程序—自定义模态框
02-20
微信小程序自定义模态框插件资源，自用成功，欢迎下载。
微信小程序 弹框和模态框实现代码
01-03
微信小程序 弹框和模态框实现代码 实现效果图： 实现代码：  <view class=mask bindtap=closeModal></view> /*模态框*/ .wxapp-modal{ width: 100%; height: 100%; position: fixed; top: 0px; ...
UNIAPP原生TABBAR设置并添加数字角标或小红点提示
qq_51463650的博客
02-09 8802
UNIAPP原生TABBAR设置并添加数字角标或小红点提示。1. 在页面加载的时候调用。2. 支付宝开发者工具上面的红点样式比较丑，但是不用调整。真机调试样式会准确些也相对好看。
微信小程序模态对话框
最新发布
pzpcxy520的博客
07-02 371
title:'',})
微信小程序wx.showModal模态对话框中content换行
peachban的博客
10-11 2510
【代码】微信小程序wx.showModal模态对话框中content换行。首先wx.showModal()的content是不支持html代码块的。那么怎么在content中换行呢？ 解决办法： 。注意：微信开发者工具上并不会换行只是会有空格，但是实际运行手机上是有换行效果的！如果想要在content里面使用变量，就要使用模板字符串。
微信小程序checkbox，checkbox-group多选框的简易用法，代码简洁，可复用性高
weixin_43951592的博客
08-04 5282
微信小程序checkbox，checkbox-group多选框的简易用法，代码简洁，可复用性高
微信小程序的text标签实现换行，空格等
苏苏就是小苏苏的博客
11-29 3万+
1.实现效果 2.text标签 text标签内的\n会解释为换行，而\n在view标签内会被解释为空格。 text标签单个空格用\t,换行用\n。 当服务端返回的数据含有\n时候，用text标签。 3.服务端返回的\n变为\n 解决方法： 新建wxs文件： var format = function (text) { if (!text) { return } var reg = getRegExp('\\\\n', 'g') return text.replace(reg,
微信小程序文字显示换行问题
01-20
小程序文字显示换行 问题 用户在上传图文时，输入换行符。导致我在拿到数据后JSON.parse的时候报错。 大概这样的结构： ...ps：下面看下微信小程序文字超出自动换行 text-overflow:ellipsis; word-wrap:
解决微信小程序scroll-view换行问题
01-03
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下： ...在网上搜索了一下小程序scroll-view文字不能换行的问题后，发现原来是小程序组件有一个默认的样式 white-space: nowr
微信小程序实现底部弹出模态框
01-21
本文实例为大家分享了微信小程序实现底部弹出模态框的具体代码，供大家参考，具体内容如下 代码： <view class=modals-cancel bindtap=hideModal></view> <view cla
微信小程序带未读数量的tabbar有选中效果
02-27
微信小程序带未读数量的tabbar，选中后，图片和颜色都有选中效果。
微信小程序弹框wx.showModal如何修改样式
weixin_30652897的博客
08-30 5222
由于官方API提供的显示模态弹窗，只能简单地显示文字内容，不能对对话框内容进行自定义，欠缺灵活性，所以自己从模态弹窗的原理角度来实现了自定义的模态对话框。 wx.showModal修改样式后的效果，如下图所示： index.wxml代码： <!--index.wxml--> <button class="show-btn" bin...
小程序模态框问题
LiangRZ
11-17 1351
小程序里要写一个模态框，他的wxml代码位置如果不对，会出现这个模态框在iPhone部分手机不起作用的问题（他在编辑器上是好使的），在安卓则没有问题，比如 这样就会出现上述问题，想要避免这个问题也很简单，就是将模态框部分的代码全部拿到最外层的位置，即最前面的位置
微信小程序之自定义模态弹窗（带动画）实例 —— 微信小程序实战系列（8）
热门推荐
michael的博客
03-16 4万+
首先看看官方提供的模态弹窗 api如下： 示例： 这样的模态弹窗，充其量只能做个alert，提示一下信息。 但是并不能使用它来处理复杂性的弹窗业务，因此写了Michael从新自定义了一个，采用了仿原生的样式写法 wxml： button 弹窗标题 标题
uniApp模态弹窗换行
猿叔的博客
07-18 1902
uni.showModal({ title: '提示', content: "交易品种：招商银行\r\n交易本金：30万元\r\n交易数量：6手", success: function (res) { if (res.confirm) { console.log('用户点击确定'); } else if (res.cancel) { console.log('用户点击取消'); }
小程序 input 换行_【我们的第一个微信小程序】第五篇：完成我们的游戏
weixin_39985820的博客
12-04 2094
现在我们已经有了两样法宝：点击“确定”按钮时修改<text>标签里的文本提示获取文本输入框里的值那完成小程序版“猜猜我是几？”就只剩下最后一步——根据游戏逻辑修改文本提示内容。也就是把我们第一行的<text>标签当做我们以前的对话框用，在里面显示“猜猜我是几？”、“我大于xx”、“我小于xx”、“猜对了”。我们把之前完整的“猜猜我是几？”代码再完整的展示一遍，然后我们就要把...
【微信小程序】微信小程序 文本过长，自动换行的问题
weixin_34321977的博客
12-06 1万+
小程序开发过程出现的问题： 文本过长，以致于在view中显示不全，没有自动换行的问题     解决方法： 在wxss样式文件中添加样式 .font-break { word-break:break-all; }   然后在对应的view上引用即可 &lt;view class="col-4 font-break"&gt; {{item.billCode}} ...
微信小程序 - wx.showModal 内容换行
卡尔特斯
10-20 3913
wx.showModal({ title: '提示', content: '测试测\n试内容!' }) 注意：换行只需要使用 \n 即可，但是只能在真机上生效，模拟器上不能生效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

上帝把我扔在人间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值