javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 微信小程序uniapp空格占位符无效

原生微信小程序/uniapp使用空格占位符无效的解决办法

作者:爱吃炸排骨

最近需要在字体中间加空白占位符,在尝试使用 之后,还是不能使用,下面这篇文章主要给大家介绍了关于原生微信小程序/uniapp使用空格占位符无效的解决办法,需要的朋友可以参考下

最近碰到一个需求,在一个<text>文本中的前后添加空格占位符,总所周知,我并不会前端,于是我查看了原生微信小程序以及uniapp官方文档,得到了以下答案:

原生微信小程序官方文档

uniapp官方文档

从文档可以知道我们可以用&nbsp;,&ensp;,&emsp;等等作为占位符实现空格效果,然而我试了很多次都没有达到效果,以下是错误示范:

<text>&ensp;爱吃炸排骨</text>

错误原因:decode默认是false,也就是说默认是不会解码的,需要手动设置为true

<text decode>&ensp;爱吃炸排骨</text>

错误原因:&ensp需要用{{}}括起来,于是!!!

<text decode>{{myText}}</text>

.js文件(原生微信小程序)或 <script>(uniapp)中写内容

myText: '&ensp;爱吃炸排骨&ensp;'

然后大功告成!!!其实我还试过好多错误的但是这里就不一 一演示了

下面是完整文件(同样也分为了uniapp和原生):

uniapp:(为了演示的明显一点我加了好多个占位符)

<template>
	<view>
		<text decode>{{myText}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myText: '&ensp;&ensp;&ensp;&ensp;爱吃炸排骨&ensp;'
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

原生微信小程序

wxml:

<text decode>{{myText}}</text>

js(为了演示的明显一点我加了好多个占位符)

Page({
  data:{
    myText: '&ensp;&ensp;&ensp;&ensp;爱吃炸排骨&ensp;'
  },

  onLoad: function() {

  }
})

🆗,完结撒花🌺🌺🌺

总结

到此这篇关于原生微信小程序/uniapp使用空格占位符无效解决的文章就介绍到这了,更多相关微信小程序uniapp空格占位符无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文