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


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数组去重方法思路及代码
Mar 26 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
vue+axios+promise实际开发用法详解
Oct 15 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
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
日期 时间js控件
2009/05/07 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
JS实现放大镜效果
2020/09/21 Javascript
python清除字符串里非字母字符的方法
2015/07/02 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python解释器spython使用及原理解析
2019/08/24 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
自动化专业个人求职信范文
2013/12/30 职场文书
2014年教师节寄语
2014/04/03 职场文书
交通安全寄语大全
2014/04/08 职场文书
竞选部长演讲稿
2014/04/26 职场文书
个人整改方案范文
2014/10/25 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
2015年教师节活动总结
2015/03/20 职场文书
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL