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


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 相关文章推荐
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
JSON格式化输出
Nov 10 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
微信小程序实现简单表格
Feb 14 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
理解javascript闭包
2015/12/15 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
Python实现类继承实例
2014/07/04 Python
Python判断变量是否已经定义的方法
2014/08/18 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
Python定时器线程池原理详解
2020/02/26 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
学校捐书倡议书
2015/04/27 职场文书