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


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 相关文章推荐
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
微信小程序收藏功能的实现代码
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 curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
用 JSON 处理缓存
2007/04/27 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
wxPython窗口中文乱码解决方法
2014/10/11 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Python如何进行时间处理
2020/08/06 Python
Python字典实现伪切片功能
2020/10/28 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
个人收入证明范本
2014/09/18 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
新闻报道稿范文
2015/07/23 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电
Python四款GUI图形界面库介绍
2022/06/05 Python