微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
时间:2019-09-26
本文章向大家介绍微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能,主要包括微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
看了很多帖子,但是效果都不是很好。还是找微信小程序官方文档,自己写比较方便。自己动手丰衣足食!话不多说,上代码!
先来个效果图
html
<block wx:for='{{trendsList}}' wx:key='index'> <view class="box"> <view class="textFour_box {{item.seeMore?'three':''}}">{{item.text}}</view> <view class="text_toggle_box" wx:if='{{item.seeMore}}' data-index='{{index}}' catchtap='toggleHandler'> <text class="text_toggle_text">查看更多</text> <image class="toggle-icon" src="../../images/1.png"></image> </view> <view class="text_toggle_box" wx:if='{{!item.seeMore && item.auto}}' data-index='{{index}}' catchtap='toggleContent'> <text class="text_toggle_text">收起</text> <image class="toggle-icon" src="../../images/2.png"></image> </view> </view> </block>
wxss
.box{ margin: 40rpx 32rpx; } .text_box{ width: 100%; font-size: 30rpx; font-weight: 400; color: rgba(87,105,123,1); line-height: 48rpx; } .textFour_box{ width: 100%; font-size: 30rpx; font-weight: 400; color: rgba(87,105,123,1); line-height: 26px; text-align: justify; } .toggle-icon { width: 25rpx; height: 25rpx; } .text_toggloe_box{ display: -webkit-box; display: -webkit-flex; flex-direction: row; align-items: center; margin: 10rpx 0; } .text_toggle_text{ font-size: 24rpx; color: #333; line-height: 32rpx; margin-right: 10rpx; } .three{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; }
js
var index; Page({ /** * 页面的初始数据 */ data: { trendsList:[ { auto: false, seeMore: false, text: '小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟', }, { auto: false, seeMore: false, text: '小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟', }, { auto: false, seeMore: false, text: '小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟', }, { auto: false, seeMore: false, text: '小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟', }, { auto: false, seeMore: false, text: '小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟小老弟', }, ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; const query = wx.createSelectorQuery(); query.selectAll('.textFour_box').fields({ size: true, }).exec(function (res) { console.log(res[0], '所有节点信息'); let lineHeight = 26; //固定高度值 单位:PX for (var i = 0; i < res[0].length; i++) { if ((res[0][i].height / lineHeight) > 3) { that.data.trendsList[i].auto = true; that.data.trendsList[i].seeMore = true; } } that.setData({ trendsList: that.data.trendsList }) }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, //展开更多 toggleHandler: function (e) { var that = this; index = e.currentTarget.dataset.index; for (var i = 0; i < that.data.trendsList.length; i++) { if (index == i) { that.data.trendsList[index].auto = true; that.data.trendsList[index].seeMore = false; } } that.setData({ trendsList: that.data.trendsList }) }, //收起更多 toggleContent: function (e) { var that = this; index = e.currentTarget.dataset.index; for (var i = 0; i < that.data.trendsList.length; i++) { if (index == i) { that.data.trendsList[index].auto = true; that.data.trendsList[index].seeMore = true; } } that.setData({ trendsList: that.data.trendsList }) }, })
总结
以上所述是小编给大家介绍的微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
- IOS WebView控件详解
- Java并发学习之synchronized使用小结
- 18.3/18.4/18.5 用keepalived配置高可用集群
- JDK容器学习之Queue:DelayQueue
- React-Native组件之 Navigator和NavigatorIOS
- JDK容器学习之Queue:ConcurrentLinkedQueue
- JDK容器学习之Queue: PriorityQueue
- React Native导航器之react-navigation使用
- Nginx 路由转发配置笔记
- React Native控件之ListView
- Java学习之深拷贝浅拷贝及对象拷贝的两种方式
- [周末课程]什么是“页面业务流程”分析思维导图?如何编写页面假JSON数据? &下一个前端组件“日历”
- Java并发学习之玩转线程池
- Java & PhantomJs 实现html输出图片
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux 远程控制windows系统下的程序(三种方法)
- 详解Linux上svn命令行批量操作
- 详解linux ntp服务器时间同步设置
- CentOS设置静态IP的方法总结
- ubuntu服务器上快速部署docker的方法
- centos7使用supervisor的详细教程
- Ubuntu安装PHP和PHP Nginx配置方法
- Django在Ubuntu14.04的部署方法
- ubuntu19系统及以下版本安装android studio的教程
- CentOS7升级内核kernel5.0版本
- 详解ubuntu14.04如何设置静态IP的方法
- linux安装图形化界面的操作方法
- Apache FlinkCEP 实现超时状态监控的步骤详解
- 解决Centos7下crontab+shell脚本定期自动删除文件问题
- 详解在Ubuntu上的Apache配置SSL(https证书)的正确姿势