微信小程序 wxml 文件中如何让多余文本省略号显示?
废话不多说,之前写小程序碰到了一个问题,如何在 wxml 页面中截取数据?
1、wxs
取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的。
那还有 css 啊,不一样可以做到吗?但是个人觉得 css 复用性太差,暂不考虑。
实在不行就用 js 呗,在获取到数据后就对数据进行截取。
这样好像可以,但数据一多稍微有点复杂,而且一般获取的数据可能会在多个页面进行展示,而如果想在不同的页面中显示不同长度的数据,这似乎又是个新问题。
这时你就需要用到 wxs 了,官方介绍是:「WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构」,没听过的可以去看一下官方文档说明。
2、wxs 怎么用
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
}
})
// page.wxml
<wxs module="m1">
var getMax = function(array) {
var max = undefined;
for (var i = 0; i < array.length; ++i) {
max = max === undefined ?
array[i] :
(max >= array[i] ? max : array[i]);
}
return max;
}
module.exports.getMax = getMax;
</wxs>
<view> {{ m1.getMax(array) }} </view> 输出:5
这是一个官方的案例,wxs 可以直接写在 wxml 页面中,但是为了达到复用的效果,推荐单独建成文件调用。
我是这么写的,新建一个 app.wxs 文件,就像写普通的 js 方法差不多,写完之后用 module.exports 暴露,等待调用。
// app.wxs
var substring = function (text, textLength) {
if (text.length == 0 || text == undefined) {
return;
}
else if (text.length > textLength) {
return text.substring(0, textLength) + '...';
} else {
return text;
}
}
module.exports = {
substring: substring
}
然后在 wxml 文件中进行引用使用。
// page.wxml 部分代码
<!-- 引入 app.wxs 脚本 -->
<wxs src="../../../../utils/app.wxs" module="tools" />
<view>标题:{{ tools.substring(title, 10) }}</view>
这样就能自由地在各个页面中显示不同的字符串长度了。
3、举一反三
当然,如果想对时间的显示样式进行处理,一样可以在 wxs 文件中编写对应的函数方法进行调用处理。
总之 wxs 就相当于有了和 js 类似的能力,如果还有其他的小技巧,欢迎留言讨论,分享、讨论才是更好的学习方式。
推荐阅读
如何制作国旗头像 | 小程序七十二变之 canvas 绘制挂件头像
微信小程序 wxml 文件中如何让多余文本省略号显示?的更多相关文章
- 微信小程序wxml文件中调用自定义函数
想在微信小程序的wxml文件里自如的像vue那样调用自定义的方法,发现并不成功,得利用WXS脚本语言. WXS脚本语言是 WeiXin Script 脚本语言的简称,是JavaScript.JSON. ...
- 微信小程序-form表单-获取用户输入文本框的值
微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...
- 微信小程序在开发中遇到的问题与解决方法
1. √ 这种错误多半是该js文件中没有Page这个方法,就算是空的js也必须要把Page({ })写上去 2. √ 这种错误多半是该json文件没有内容,所以必须要加上{ },就算是空内容也要加 ...
- 微信小程序实际开发中学习
三个概念 微信:就是一个聊天工具 微信公众号:企业或个人用于管理其粉丝/用户的应用(类似于APP) 微信小程序:不需要下载安装直接可以使用的软件/应用/APP 小程序与公众号的区别: 定位不同(小程序 ...
- 微信小程序开发——模板中加载html代码
最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text: <rich-text class='f13 c_9' nodes=" ...
- 微信小程序自学过程中遇到的问题 转
view标签下hover必须为true时,设置hover-class才有效,hover-start-time和hover-stay-time的形式如下: < view class=" ...
- 微信小程序wxml和wxss样式
对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...
- 微信小程序WXML页面常用语法(讲解+示例)
(一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...
- less文件编译成微信小程序wxss文件
2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关注,刷爆朋友圈子.在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜.在做demo小示例的过 ...
随机推荐
- AI-Azure上的认知服务之Computer Vision(计算机视觉)
使用 Azure 的计算机视觉服务,开发人员可以访问用于处理图像并返回信息的高级算法. 主要包含如下高级算法: 标记视觉特性Tag visual features 检测对象Detect objects ...
- alibaba/flutter_boost
flutterBoost使用笔记 新一代Flutter-Native混合解决方案. FlutterBoost是一个Flutter插件,它可以轻松地为现有原生应用程序提供Flutter混合集成方案.Fl ...
- 2019icpc银川站 复现赛
打了计蒜客上的银川重现赛,总体感觉难度上确实比平时区域赛要低上一些. 这里补一下F题和G题的思路和代码. upd:I题也补了,理解差不多都在注释里. F题 做法,玩一下n=10的样例就出 ...
- C#中的Skip()和Take()
Skip()和Take()方法都是IEnumerable<T> 接口的扩展方法,包括C#中的所有Collections类,如ArrayList,Queue,Stack等等,还有数组和字符串 ...
- AssemblyBuilder以及Activator双剑合璧
AssemblyBuilder和Activator两个类是DispatchProxy类实现动态代理以及AOP的根本,示例demo可参考 DispatchProxy实现动态代理及AOP .Assembl ...
- SpringCloud(八):springcloud遇到的坑总结
spring boot 版本演信息: 文章链接:https://github.com/spring-projects/spring-boot/releases?after=v2.0.0.M3 http ...
- s3c2440裸机-代码重定位、清bss的改进和位置无关码
1.代码重定位的改进 用ldr.str代替ldrb, strb加快代码重定位的速度. 前面重定位时,我们使用的是ldrb命令从的Nor Flash读取1字节数据,再用strb命令将1字节数据写到SDR ...
- 计算机网络基础笔记 运输层协议UDP/TCP
目录 UDP 首部结构 主要特点 TCP 首部结构 主要特点 TCP 可靠性实现 停止等待ARQ协议 连续ARQ协议&滑动窗口协议 拥塞控制 TCP 运输连接管理 连接建立:三次握手 连接释放 ...
- Java面试准备基础篇_11.24
Java类加载机制 Java内存模型JMM 为什么 Redis 单线程能支撑高并发? 高并发下的接口幂等性解决方案! 面试官问:平常你是怎么对 Java 服务进行调优的? JAVA虚拟机(JVM)六: ...
- 剑指Offer-45.扑克牌顺子(C++/Java)
题目: LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他决定 ...