微信小程序 - 文字收缩与展开
2024-08-20 11:45:51
wxml
<view class='containers'>
<text class="content {{ellipsis?'ellipsis':'unellipsis'}}">
飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发前二十阿里附近发打发打发是范德萨发放就开了房间爱离开房间爱卡房间爱疯爱疯飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发
</text>
<view bindtap='ellipsis'>
<view>
<button>{{ellipsis?'展开':'收起'}}</button>
</view>
</view>
</view> <!--
1. content view包裹text,一旦超出,使用css(-webkit-line-clamp)样式来控制展开或收缩
2. button按钮绑定一个事件,根据({{ellipsis}}),使之置为true或false来控制展开或收缩
-->
css
page{
font-size: 30rpx;
} .content {
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
} /* 修改列数 */
.ellipsis {
-webkit-line-clamp:;
} /* 展示全部 */
.unellipsis {
-webkit-line-clamp:;
}
js
let _page; Page({
data: {
// 文字是否收起,默认收起
ellipsis: true
},
/**
* 收起/展开按钮点击事件
*/
ellipsis() {
_page = this;
let value = !this.data.ellipsis;
_page.setData({
ellipsis: value
})
}
})
点击下载示例:小程序-文字与收缩
最新文章
- HTTP请求应答服务——HTTP Request &; Response Service
- 【转】input输入框中光标高度的变化问题
- Java NIO入门(二):缓冲区内部细节
- android textView 添加超链接(两种实现方式)
- 【转发】构建高可伸缩性的WEB交互式系统(上)
- “我爱淘”冲刺阶段Scrum站立会议3
- webhdfs追加写HDFS异常
- JBPM4入门——4.封装流程管理的工具类(JbpmUtil)
- jackson基于注解的简单使用
- 编译boost (windows msvc14)
- fork/join使用示例
- 微信公众平台Token验证失败的解决办法
- jQuery zTree v3.5 实例3 异步树
- string下的 maketrans和translate
- yacc和lex在ubuntu上安装
- Redis是什么
- Flask web开发 处理POST请求(登录案例)
- android实现应用程序仅仅有在第一次启动时显示引导界面
- 关于JavaScript简单描述
- 20. leetcode 171. Excel Sheet Column Number
热门文章
- numpy中的random函数
- SQL 死锁进程查询
- Illegal instruction错误的定位---忽略编译期警告的代价
- Node.js是一个事件驱动I/O服务端JavaScript环境
- window.open(";url?param=";+paramvalue) 服务端 乱码问题解决
- dao层的泛型实现(2种方法)
- Objective-C:保留计数器思想的详解(对象的保留和所有权的释放)
- OpenCV学习(24) 直方图(1)
- 纯净版xp系统在局域网共享需要密码如何解决
- go语言之进阶篇面向对象编程