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

这篇具有很好参考价值的文章主要介绍了原生微信小程序/uniapp使用空格占位符无效解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

  • 原生微信小程序官方文档
    uniapp空格占位符,微信小程序,uni-app,前端,小程序
  • uniapp官方文档
    uniapp空格占位符,微信小程序,uni-app,前端,小程序
    从文档可以知道我们可以用&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() {

  }
})

🆗,完结撒花🌺🌺🌺文章来源地址https://www.toymoban.com/news/detail-779787.html

到了这里,关于原生微信小程序/uniapp使用空格占位符无效解决方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 使用uniapp编写微信小程序并与原生小程序代码进行融合

    使用uniapp编写微信小程序并与原生小程序代码进行融合

    在使用uniapp编写时所使用的语法为VUE,代码编写完成后点击HBuilder X工具窗口:发行编译为小程序,即可自动转换为小程序的代码 解决问题: 编译之后代码会被进行压缩,vue文件会被拆分,其中的变量名也会被替换掉,基本没有可读性,变成这样: 这样的代码基本是不可进行

    2024年02月09日
    浏览(81)
  • uniapp小程序(原生微信小程序也可以使用),获取接口二进制流数据上传文件到服务器

    需求:通过接口返回的二进制流数据,这个流数据他是一个xlsx文档,需要给到用户一个文档线上连接。 下面是具体代码,注意只针对二进制的文件数据,如果图片上传直接调用uploadFile就可以,并且兼容原生微信小程序。  

    2024年02月16日
    浏览(49)
  • uniapp 微信小程序:v-model双向绑定问题(自定义 props 名无效)

    uniapp 微信小程序:v-model双向绑定问题(自定义 props 名无效)

    VUE中父子组件传递数据的基本套路: 父传子 props 子传父 this.$emit(\\\'事件名\\\', \\\'数据\\\'); 使用 sync 修饰符,实现 支持同步数据 因为用的是 uniapp 开发小程序,所以要考虑到兼容性问题,不要把自己当正经VUE2。 小程序虽然支持 v-model 指令,但不支持 model 选项。 所以要么子组件中声

    2024年02月15日
    浏览(9)
  • Uniapp与原生微信小程序开发区别对比

    微信小程序:(微信小程序也可以不写wx:for-index和wx:for-item,默认为index和item`) uni-app:

    2024年02月15日
    浏览(45)
  • 关于微信小程序原生组件与uniApp混合开发过程遇到的问题与解决方式

    前言: 在实际开发过程中,尤其是小程序的开发,我们常常会遇到一些在文档中解决不了的问题,在这里,我就浅谈一下我遇到的一些问题 1.小程序的构建框架是uni-app,却突然被要求用原生的微信小程序代码来开发,到最后要整合到uni-app里面 这个整合问题,uni-app官网就有

    2024年02月05日
    浏览(47)
  • 微信小程序使用scroll-view导致吸顶无效或vant-sticky吸顶无效

    我们先清楚为什么要使用scroll-view? 在做回到顶部时,需要拿到实时的滚动距离,这时候就得使用上scroll-view了 记录一次在做 微信小程序开发时,在没有使用scroll-view的时候,我们使用vant-sticky做吸顶效果的时候可以正常使用。 但是当我们使用scroll-view时,突然发现吸顶失效

    2024年02月09日
    浏览(50)
  • 开发微信小程序使用原生开发还是uniapp开发

    开发微信小程序使用原生开发还是uniapp开发

    大家好,我是蔓云科技的小蔓(写代码的平面师)。 今天给大家带来一门知识普及课,开发小程序使用原生还是uniapp,如果你想开发一款小程序,通过这个视频你会得到答案。 相信大家对小程序都不陌生吧,在生活的方方面面中都有它的身影,比如:社区团购、商城购物、

    2024年02月17日
    浏览(45)
  • 原生小程序 微信小程序 使用ucharts

    原生小程序 微信小程序 使用ucharts

    背景:    原生小程序需要好看的折线图。 实现: 小程序开发版本 一般是uni-app项目使用ucharts在原生微信小程序也是可以使用。 方法: 源码下载: uCharts: 高性能跨平台图表库,支持H5、APP、小程序(微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小

    2024年02月09日
    浏览(8)
  • 原生微信小程序使用 wxs;微信小程序使用 vant-weapp组件

    原生微信小程序使用 wxs;微信小程序使用 vant-weapp组件

    在这里插入图片描述 操作顺序 :文档地址 如果使用 typescript 需要操作步骤3,否则不需要操作 2.1 在根目录下 操作 2.2 安装版本 2.3 构建包 - 详情-勾选使用 npm 2.4 使用 vant 组件

    2024年02月11日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包