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


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 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
详解React中的组件通信问题
Jul 31 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
angular2模块和共享模块详解
Apr 08 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 cache类代码(php数据缓存类)
2010/04/15 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
js版本A*寻路算法
2006/12/22 Javascript
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
前端性能优化及技巧
2016/05/06 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
对于Python中线程问题的简单讲解
2015/04/03 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python3 爬取图片的实例代码
2018/11/06 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
Python matplotlib可视化实例解析
2020/06/01 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
Django配置跨域并开发测试接口
2020/11/04 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
淘宝客服专员岗位职责
2014/04/11 职场文书
诚信承诺书模板
2014/05/26 职场文书
支部鉴定材料
2014/06/02 职场文书
社区护士演讲稿
2014/08/27 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
青岛海底世界导游词
2015/02/11 职场文书
学生会部长竞选稿
2015/11/19 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android