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

 更新时间:2023年02月27日 09:45:03   作者:爱吃炸排骨  
最近需要在字体中间加空白占位符,在尝试使用 之后,还是不能使用,下面这篇文章主要给大家介绍了关于原生微信小程序/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空格占位符无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 终于解决了IE8不支持数组的indexOf方法

    终于解决了IE8不支持数组的indexOf方法

    今天,测试报过来一个js bug, 在IE8下有个js错误,但是在其它浏览器下(Firefox, Chrome, IE9)下面都很正常。后来调试发现原因是在IE8下,js数组没有indexOf方法。
    2013-04-04
  • HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    这篇文章主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下
    2015-11-11
  • 微信小程序自定义菜单导航实现楼梯效果

    微信小程序自定义菜单导航实现楼梯效果

    在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果。在框架中vant UI框架也为我们实现了这一效果。接下来通过本文给大家介绍微信小程序自定义菜单导航实现楼梯效果,感兴趣的朋友一起看看吧
    2021-12-12
  • 如何使用 JavaScript 操作浏览器历史记录 API

    如何使用 JavaScript 操作浏览器历史记录 API

    这篇文章主要介绍了如何使用 JavaScript 操作浏览器历史记录 API,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2020-11-11
  • JavaScript设计模式之原型模式分析【ES5与ES6】

    JavaScript设计模式之原型模式分析【ES5与ES6】

    这篇文章主要介绍了JavaScript设计模式之原型模式,简单描述了原型模式的概念、原理,并结合实例形式分析了ES5与ES6实现原型模式的相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • 手写TypeScript 时很多人常犯的几个错误

    手写TypeScript 时很多人常犯的几个错误

    这篇文章主要介绍了手写TypeScript 时很多人常犯的几个错误,文章围绕主题展开详细的内容介绍,具有一定的抽卡,重要的朋友可以参考一下
    2022-09-09
  • Webpack之plugin的使用

    Webpack之plugin的使用

    本文主要介绍了Webpack之plugin的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • 微信小程序点击列表跳转到对应详情页过程解析

    微信小程序点击列表跳转到对应详情页过程解析

    这篇文章主要介绍了微信小程序点击列表跳转到对应详情页过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • js函数般调用正则

    js函数般调用正则

    Firefox 包含了一个非标准的 JavaScript 扩展,使正则像函数一样可调用。
    2008-04-04
  • 一文详解JavaScript中的按值传递和按引用传递

    一文详解JavaScript中的按值传递和按引用传递

    编程语言中,把一个变量的值赋值给另一个变量,或者给函数调用传递参数有两种方式:按值传递和按引用传递,本文将给大家详细介绍JavaScript中的按值传递和按引用传递,需要的朋友可以参考下
    2024-05-05

最新评论