微信小程序wxml使用substring

等级 922 0 1

首先创建subutils.wxs文件

var sub = function (val, start=0, end=17) {
  if (val.length == 0 || val == undefined) {
    return
  }
  if (val.length > end) {
    return val.substring(start, end)+'...'
  } else {
    return val
  }
}
module.exports.sub = sub

在wxml页面引用

<wxs src="/components/subutils.wxs" module="tools" />
{{tools.sub(string,0,10)}}
收藏
评论区

相关推荐

微信小程序modal
首先创建一个组件component,组件命名可以为modal modal.wxml的内容为 <view class'modalmask' wx:if'{{show}}' bindtap'clickMask' <view class'modalcontent' <scrollview scrolly class'mainc
微信小程序wxml使用substring
首先创建subutils.wxs文件 var sub function (val, start0, end17) { if (val.length 0 || val undefined) { return } if (val.length end) { return val.substring(start
微信小程序轮播图
实现效果 wxml代码 <view style"height:20rpx;"</view <view class"swiper"
微信小程序部分api 会触发 onShow onHide
解决部分api触发小程序 onShow onHide 首先要明白 微信小程序的 onShow() onHide()分为页面级的和应用级的,应用级的就是app.js里面的那几个,页面级的就是pages里的 当使用了下列api时,均会触发页面级和应用级的onShow onHide 1. 点击右上角小圆点关闭小程序。 2. 图片预览:wx.preview
微信小程序 - 路由实践
欢迎来到我博客阅读:1\. 前言在微信小程序由一个 App()实例,和众多Page()组成。而在小程序中所有页面的路由全部由框架进行管理,框架以栈的形式维护了所有页面,然后提供了以下 API 来进行路由之间的跳转:1. wx.navigateTo2. wx.redirectTo3. wx.navigateBack4.
微信小程序 - 引入字体图标
网站图标要想做到清晰无锯齿,使用普通图片或者雪碧图都很难达到这个目的,一般我们都会引入字体图标(svg转font,使用图标像使用字体一样,详见《web页面使用字体图标》,那么如何在微信小程序中使用自定义图标呢?请看详细步骤:1、从上选择喜欢的图标加入购物车,在购物车弹窗中点击“下载代码”后,解压阿里图库 加入购物车购物车 下载代码图标文件内容2.、进入导入第
微信小程序 - 页面间传值
小程序页面间传值大家晚上好,说晚上好是因为是在晚上写的,说这句话是因为这句话开篇不那么突然。那么小程序的页面间传值,在我使用这段时间里,我就非常的主观的把它们分为wx.navigateTo和非wx.navigateTo的,因为wx.navigateTo有一个事件参数event,我从当前页跳转到下一页,如果需要能返回,我都用的wx.naviga
Vue和微信小程序的区别
_写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。_一、生命周期先贴两张图: vue生命周期 小程序生命周期相比之下,小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。 onLoad
微信小程序 - 生命周期篇
为什么需要掌握小程序的生命周期当你的领导张小三给你说: 这个请求应该在应用启动的时候发起呢 页面跳转的时候就要取消异步任务哦 应用隐藏的时候记得关闭一下定时器哈那时候的你会一脸懵逼和不知所措还无从下手吗综上所述:我们理所当然的要对微信小程序的生命周期做到滚瓜烂熟,只有这样才能让领
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子? 使用使用起来应该像是这个样子wxue(options) setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下import wxue, reactive from 'wxue'wxue( setup(option
1.微信小程序里如何设置当地时间?
方法一: 1.效果图 ![](https://oscimg.oschina.net/oscnet/70713c28ea7b6a54306f79034d1ba2bcafe.png) 2.wxml code: <!--pages/index/index.wxml--> <text>当前时间:{{time}}</text> <tex
1小时搭建微信小程序后端
CoNami小程序Demo端到端开发指南 ==================== 1\. 注册登录微信公众平台 -------------- 登录[https://mp.weixin.qq.com,里面有详细的指引,这里就不赘述了。这里注册最后得到的比较重要的东西包括两个](https://www.oschina.net/action/GoToLink
2021年前端还有前景吗?
或许很多刚刚入门前端的同学都会思考:2021年前端还有前景吗? 随着微信小程序的普及,以及app的下载,留给网页端的空间会越来越小吗?大公司固然无所谓,可是对于小公司与其耗费精力做网页,还不如开个公众号小程序。所以学前端会有未来吗? **其实前端绝不仅仅是网页开发而已**。微信小程序和 App,其实都离不开前端范畴。尤其是微信小程序,几乎就是前端垄断的世
2021年前端还有前景吗?
或许很多刚刚入门前端的同学都会思考:2021年前端还有前景吗? 随着微信小程序的普及,以及app的下载,留给网页端的空间会越来越小吗?大公司固然无所谓,可是对于小公司与其耗费精力做网页,还不如开个公众号小程序。所以学前端会有未来吗? **其实前端绝不仅仅是网页开发而已**。微信小程序和 App,其实都离不开前端范畴。尤其是微信小程序,几乎就是前端垄断的世
taro小程序展示富文本
在微信小程序下会用到wxParse这个东西来达到html转换wxml的效果, taro小程序官方也给出了示例,[地址](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2FNervJS%2Ftaro-components-test%2Fblob%2Fmaster%2F