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


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的左右滚动实现代码
Dec 03 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
javascript实现计算器功能
Mar 30 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
星际RPG字典
2020/03/04 星际争霸
PHP函数引用返回的实例详解
2016/09/11 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
Python requests模块cookie实例解析
2020/04/14 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
简单说说tomcat的配置
2013/05/28 面试题
贷款委托书范本
2014/04/08 职场文书
安全员岗位职责范本
2015/04/11 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
在pyCharm中下载第三方库的方法
2021/04/18 Python
MySQL创建管理KEY分区
2022/04/13 MySQL
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis