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

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

时空传送

先来个效果图

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

总结

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

(0)

相关推荐

  • 微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.操作步骤: ① 数据绑定view样式背景属性值 ② 通过逻辑文件设置该背景属性初始值 ③ 通过点击按钮修改背景属性值 3.关键代码 index.wxml文件: <view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view> <button type=

  • 微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法

    本文实例讲述了微信小程序实现动态设置placeholder提示文字及按钮选中取消状态的方法.分享给大家供大家参考,具体如下: 效果图展示    通过绑定点击事件placeholder方法,获取data-num的值,通过js判断num等于几,然后通过class="{{num==X?'active':''}}"表达式判断哪个标签处于选中状态(即蓝底白字): js通过获取data-key,设置input输入框中placeholder的动态值 wxml里的内容: <view class=

  • 微信小程序实现的点击按钮 弹出底部上拉菜单功能示例

    本文实例讲述了微信小程序实现的点击按钮 弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindch

  • 微信小程序分享功能之按钮button 边框隐藏和点击隐藏

    先上图 样式设置: 在小程序社区看了下,说是伪类造成的.于是就重新定义下样式.然后就 ok 了. 总结 以上所述是小编给大家介绍的微信小程序分享功能之按钮button 边框隐藏和点击隐藏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • 详解微信小程序胶囊按钮返回|首页自定义导航栏功能

    项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页

  • 微信小程序中添加客服按钮contact-button功能

    小程序的客服系统,是微信做的非常成功的一个功能,开发者可以很方便的通过一行代码,就可实现客服功能. 1. 普通客服按钮添加 <button open-type='contact' session-from=''>客服-联系我们</button> 2. 悬浮客服按钮添加,图片自定义 大家看地图的有个客服图片图片资源.大家去iconfont 网站去找一个就可以了 index.wxml <button class="kf_button" open-type=&q

  • 微信小程序按钮点击跳转页面详解

    微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talkPage界面. 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:fail url "pages/index/talkPage" is not in app.j

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

    看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 时空传送 先来个效果图 html <block wx:for='{{trendsList}}' wx:key='index'> <view class="box"> <view class="textFour_box {{item.seeMore?'three':''}}">{{item.text}}</view

  • 微信小程序 实现列表项滑动显示删除按钮的功能

    微信小程序 实现列表项滑动显示删除按钮的功能 微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.

  • 微信小程序使用progress组件实现显示进度功能【附源码下载】

    本文实例讲述了微信小程序使用progress组件实现显示进度功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 复制代码 代码如下: <progress percent="100" color="blue" stroke-width="20" show-info active/> progress组件属性说明如下: 感兴趣的朋友可以逐一尝试上述属性设置的具体用法. 3.源代码点击此处本站下载. 关

  • 微信小程序之多列表的显示和隐藏功能【附源码】

    今天在项目碰到一个问题,之前在项目首页实现单列表的显示和隐藏,通过wx:if判断就可实现,现在要实现多列表的单项显示和隐藏功能应该如何实现呢?如果还用wx:if实现的话会出现点击一个列表项,多个列表同时显示和隐藏,明显不适合功能需求,然后简单地查了资料也没发现有类似的功能,最后思考一番后,慢慢地理清了思路... 效果图: 实现思路: 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项,可以用数据的id: css中定义一个hidden{display:none}控制显示和

  • 微信小程序swiper左右扩展各显示一半代码实例

    这篇文章主要介绍了微信小程序swiper左右扩展各显示一半代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 实现如下的功能: 动图展示效果 代码如下: index.wxml <swiper class='swiper' next-margin='120rpx' bindchange='swiper'> <block wx:for="{{devices}}" wx:key="" wx:for-

  • 微信小程序swiper使用网络图片不显示问题解决

    这篇文章主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 wxml代码: <view class="container"> <swiper indicator-dots="true}" autoplay="true" interval="3000" duration="1">

  • 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

    本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY() 属性,给需要动画的元素添加上一个动画class. 先上效果图: 1.蒙层的结构: <!-- 购物车蒙层 --> <view class='list-fix' wx:if="{{mengShow}}" bindt

  • 微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】

    本文实例讲述了微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <form bindsubmit="formBindsubmit" bindreset="formReset"> <view style="display:flex;"> <label>用户名:</label> <input

  • 微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)

    1.wxml代码: <view class="page"> <import src="../../components/catering-item/catering-item.wxml" /> <!-- 左侧滚动栏 --> <view class='under_line'></view> <view class="body"> <view style='float: l

  • 微信小程序实现用table显示数据库反馈的多条数据功能示例

    本文实例讲述了微信小程序实现用table显示数据库反馈的多条数据功能.分享给大家供大家参考,具体如下: 解决了微信小程序自定义表格,并显示的多条数据的问题. index.wxml <view> <text>我的调查问卷</text> <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex"> <view class="

随机推荐