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


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 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
JavaScript中的 new 命令
May 22 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 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
APMServ使用说明
2006/10/23 PHP
php 显示指定路径下的图片
2009/10/29 PHP
php中explode与split的区别介绍
2012/10/03 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python实现简单淘宝秒杀功能
2018/05/03 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
使用python实现kNN分类算法
2019/10/16 Python
Python模块的制作方法实例分析
2019/12/21 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
演讲稿怎么写才完美
2014/01/02 职场文书
清洁工表扬信
2014/01/08 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
世博会口号
2014/06/20 职场文书
经营理念标语
2014/06/21 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
年检委托书
2014/08/30 职场文书
《将心比心》教学反思
2016/02/23 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
世界文化遗产导游词
2019/08/07 职场文书