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

这篇具有很好参考价值的文章主要介绍了微信小程序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('用户点击取消')
      }
   }
})

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

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

wx.showmodal 换行,微信小程序,小程序

这是手机上显示的效果:

wx.showmodal 换行,微信小程序,小程序

如果想要在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的换行。文章来源地址https://www.toymoban.com/news/detail-771234.html

到了这里，关于微信小程序wx.showModal模态对话框中content换行的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！