微信小程序wx.showModal模态对话框中content换行

首先wx.showModal()的content是不支持html代码块的。那么怎么在content中换行呢?

解决方案:使用“\r\n”换行

wx.showModal({
   title: 'showModal换行',
   content: '这是第一行\r\n这是第二行\r\n这是第三行',
   success(res) {
      if (res.confirm) {
        console.log('用户点击确定')
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
   }
})

注意:微信开发者工具上并不会换行只是会有空格,但是实际运行手机上是有换行效果的! 

这是微信开发者工具的效果:

这是手机上显示的效果:

如果想要在content里面使用变量,就要使用模板字符串。

	const errMes = res.retErr.map(item => item.mes + `\r\n`).join('').slice(0, -4);
    wx.showModal({
       title: 'showModal换行',
       content: `${errMes}`,
       success(res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
       }
    })
				

        .join('') 将数组用""连接成为一个字符串

        .slice(0, -4) 截取掉数组最后一项的换行,最后一项不需要换行。

这样就完成了微信小程序wx.showModal模态对话框中content的换行。

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值