微信小程序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的换行。

猜你喜欢

转载自blog.csdn.net/peachban/article/details/133768440
今日推荐