微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能


Posted in Javascript onSeptember 26, 2019

看了很多帖子,但是效果都不是很好。还是找微信小程序官方文档,自己写比较方便。自己动手丰衣足食!话不多说,上代码!

时空传送

先来个效果图

微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能

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
  })
 },
})

总结

以上所述是小编给大家介绍的微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 打印内容方法小结
Nov 04 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
通过实例讲解JS如何防抖动
Jun 15 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 Javascript
vue实现百度搜索功能
Dec 28 #Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 #Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 #Javascript
react实现同页面三级跳转路由布局
Sep 26 #Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 #Javascript
小程序调用微信支付的方法
Sep 26 #Javascript
细说webpack6 Babel的使用详解
Sep 26 #Javascript
You might like
简单的页面缓冲技术
2006/10/09 PHP
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
js控制input输入字符解析
2013/12/27 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
Python如何为图片添加水印
2016/11/25 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
上课迟到检讨书
2014/02/19 职场文书
村级四风对照检查材料
2014/08/24 职场文书
三八节祝酒词
2015/08/11 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书