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


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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 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获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
vue实现记事本功能
2019/06/26 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
Python实现一个优先级队列的方法
2020/07/31 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
什么是URL
2015/12/13 面试题
在C#中如何实现多态
2014/07/02 面试题
Mysql基础知识点汇总
2021/05/26 MySQL
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫