小程序折叠与展开文章的的实现

需求

页面折叠超出的的部分显示省略号,点击展开后显示全部内容

clipboard.png


需要解决的问题

  • 箭头随展开折叠后箭头方向的变化
  • 当点击箭头文本显示内容的变化

如何解决?

  1. 箭头方向的变化是一个点击事件bindtap,点击后更换小图标;
  2. 文本变化是一个show或者hide的事情,折叠的时候有个多行文本溢出得问题五个属性(display: -webkit-box,-webkit-box-orient: vertical, -webkit-line-clamp,text-overflow,overflow
  3. 状态与数据绑定控制样式

具体实现

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,
    })
  }

前端菜鸟

494 声望
572 粉丝
0 条评论
推荐阅读
从零到一开发vscode插件变量翻译
需求的起因是英语渣在开发的过程中经常遇到一个变量知道中文叫啥,但是英文单词可能就忘了,或者不知道,这个时候,我之前做法是打开浏览器,打开谷歌翻译,输入中文,复制英文,然后切回vscode,粘贴结果。实在...

kerin12阅读 3.5k评论 1

有意思,小程序还可以一键生成App!
说到小程序,大部分同学的第一反应,可能是微信小程序、支付宝小程序,确实,小程序的概念深入人心,并且已经被约定俗成的绑定到某些互联网公司的 APP 上。

chokcoco4阅读 723评论 2

微信小程序之聊天室(多人聊天室)总结
实现方式一:使用nodejs + socket.io实现缺点:引用weapp.socket.io.js 大小100kb实现方式二:使用小程序云开发- 数据库实时监听 来实现缺点:目前不可以跨端,只能在当前小程序聊天预览效果:未完待续..来源:[...

jigsaw1阅读 4.9k

NutUI 京东小程序发布了!
NutUI 是一套京东风格的轻量级移动端组件库,目前已有 70+ 高质量组件,覆盖移动端主流场景。NutUI 3.1 版本上线后,增加了多端小程序适配能力,在微信小程序平台取得了很好的效果。而现在,NutUI 支持京东小程序...

京东设计中心JDC2阅读 1.1k

封面图
微信小程序归结
是的,在这个框架满天飞的年代,我既然有有幸使用了原生小程序开发项目,除了麻烦些,倒也不是一无所获,耕耘总有收货嘛,写博客本身不是为了炫技还是什么,单纯的是记性不好,有些知识点 自己是花了时间去查找的...

HappyCodingTop1阅读 958

封面图
魔方带壳截图:让你的截图看起来更加高大上
我们在日常工作和生活中,往往需要截图去做汇报或分享。普通人的做法:手机或电脑截图,然后就拿去汇报或分享。这样你的截图显得平平无奇,没有给人眼前一亮的感觉。但是,如果我们给这张截图穿上一件“衣服”,把...

老人羽海阅读 1.2k

封面图
抖音视频去水印小程序
先看成果演示,直接复制抖音视频到抖抖来去水印小程序上下载无水印视频本示例接口主要是通过node开发,但分析思路是相通的。如何获取无水印视频下载地址?1、从抖音上复制链接5.15 bAT:/ 复制打开抖音,看看【程...

Linden1阅读 783评论 3

前端菜鸟

494 声望
572 粉丝
宣传栏