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


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 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
bootstrap table实例详解
Jan 06 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
js实现移动端轮播图滑动切换
Dec 21 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
IIS下PHP的三种配置方式对比
2014/11/20 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
php函数式编程简单示例
2019/08/08 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
php post换行的方法
2020/02/03 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
js function使用心得
2010/05/10 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
利用Python实现颜色色值转换的小工具
2016/10/27 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
Django REST framework视图的用法
2019/01/16 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
一行python实现树形结构的方法
2019/08/09 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
Delphi软件工程师试题
2013/01/29 面试题
毕业生动漫设计求职信
2013/10/11 职场文书
教导处工作制度
2014/01/18 职场文书
环保标语口号
2014/06/13 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
假期读书倡议书3篇
2019/08/19 职场文书