微信小程序实现折叠与展开文章功能


Posted in Javascript onJune 12, 2018

需求

页面折叠超出的的部分显示省略号,点击展开后显示全部内容

微信小程序实现折叠与展开文章功能

需要解决的问题

  • 箭头随展开折叠后箭头方向的变化
  • 当点击箭头文本显示内容的变化

如何解决?

  • 箭头方向的变化是一个点击事件bindtap,点击后更换小图标;
  • 文本变化是一个show或者hide的事情,折叠的时候有个多行文本溢出得问题五个属性(display: -webkit-box,-webkit-box-orient: vertical, -webkit-line-clamp,text-overflow,overflow)
  • 状态与数据绑定控制样式

具体实现

wxml

<view class="company-detail">
    <view class="company-detail-content">
      <view class="weui-loadmore weui-loadmore_line">
        <view class="weui-loadmore__tips weui-loadmore__tips_in-line">公司介绍</view>
      </view>
      <view class="long-dec {{isFold?'hide':'show'}}">
        <text class="first-dec">
          创业是个失败概率很大的事情,我们很高兴从2012底到现在还活着, 而且还活的很不错。 目前有赞旗下的产品有:有赞微商城、有赞收银、有赞零售、有赞美业、有赞批发、有赞买家版、有赞微小店.
        </text>
        <text class="second-dec">
          我们认为,相比较业务来说,团队才是公司的核心。有赞没有“员工”只有“小伙伴”,也没有人姓“公”名“司”,我们有一群聪明、有要性、又皮实的伙伴,这才是我们最大的资产。
        </text>
        <text class="last-dec">
          有赞的小伙伴目前已超过1000人,工程师比例占55%,我们有很浓的工程师氛围,每周都有很多的有意思的分享:有出国旅游的分享、有如何搭讪的分享、有如何装修房子的分享...技术分享更是数不胜数。 我们的工作不是很轻松,但我们的氛围很轻松,很open,公司里随处可见骑着独轮车来回跑的工程师、懒人沙发、午睡吊篮、复古电话亭等等,每个月都有节日、新人表演、拓展、派对等,对我们来说,天天都可以是节日。我们倡导简单直接的沟通方式,希望做一家通透的公司。这里并没有过多的等级划分,你可以随时提出自己的意见和任何人PK。福利方面我们全额缴纳五险一金,每月980元的有赞E卡鼓励大家一起吃喝玩乐。工程师标配MacBookPro、大屏显示器和机械键盘。办公室里常备零食、水果,休息区有电视、游戏机、桌球、乒乓球、四驱赛车、桌游随时供大家放松减压。每天晚下班的打车费报销,每年给你和你的家人提供旅游和体检等等。
        </text>
      </view>
      <image class="arrow" src=" {{isFold?'../../youzan-image/down.png':'../../youzan-image/up.png'}}" bindtap="showAll"></image>
    </view>
  </view>

wxss

.long-dec{
  padding-left: 20rpx;
  margin-top: -87rpx;
  display: -webkit-box;/*关键属性*/
  font-size:28rpx;
  color:#cfcfd0;
  line-height: 40rpx;
  word-break: break-all;
  -webkit-box-orient: vertical;/* 关键属性 */
  -webkit-line-clamp:6;/* 关键属性 */
  overflow: hidden;/* 关键属性 */
  text-overflow:ellipsis;/* 超出内容显示省略号*/
}
.hide{
 display: -webkit-box;
}
.show{
 display: block;
}
.arrow{
 position: absolute;
 width: 40rpx;
 height: 43rpx;
 left: 50%;
 transform: translate(-50%);
}

js

Page({
 data: {
  isFold: true,
 },
showAll: function (e) {
  this.setData({
   isFold: !this.data.isFold,
  })
 }

总结

以上所述是小编给大家介绍的微信小程序折叠与展开文章的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
详解Node.js开发中的express-session
May 19 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
微信小程序收藏功能的实现代码
Jun 12 #Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 #Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 #Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 #Javascript
webpack分离css单独打包的方法
Jun 12 #Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 #Javascript
webpack 样式加载的实现原理
Jun 12 #Javascript
You might like
php生成缩略图的类代码
2008/10/02 PHP
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
accesskey 提交
2006/06/26 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
什么造成了Java里面的异常
2016/04/24 面试题
大学生毕业自荐信
2013/10/10 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
业务员自荐信范文
2014/04/20 职场文书
竞赛口号大全
2014/06/16 职场文书
邀请函模板
2015/02/02 职场文书
采购内勤岗位职责
2015/04/13 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
搭建Yolov5服务器
2022/04/30 Servers