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


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 相关文章推荐
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
JavaScript实现下拉列表
Jan 20 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
Python入门_浅谈for循环、while循环
2017/05/16 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
提升Python程序性能的7个习惯
2019/04/14 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
浅谈django channels 路由误导
2020/05/28 Python
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
高分子材料与工程专业推荐信
2013/12/01 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
公司担保书格式范文
2014/05/12 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
购房委托书范本
2014/09/18 职场文书
退学证明范本3篇
2014/10/29 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis