致谢 https://www.jianshu.com/p/9458083214cc

效果图

 

代码

js部分

// pages/volunteer/active/info/activeInfo.js
const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    active:{},//活动详情
    val:false
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let id = options.id;
    //获取活动详情
    console.info("onReady")
    this.getActiveData(id);
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.info("onshow")
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.info("onHide")
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.info("onUnload")
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.info("onPullDownRefresh")
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.info("onReachBottom")
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  },
  
  //获取推荐
  getActiveData:function(id){
    console.info("***getActiveData****************************" + id);
    let _this = this;
    wx.request({
      url: app.globalData.serverIp + 'vol/active/getActiveInfo',
      method: "GET",
      data: {
        id: id,
      },
      success: function(res) {
        console.info("getActiveData**********************")
        console.info(res)
        if (res.data.code == 200) {
          _this.setData({
            active: res.data.data,
          })
        }
      },
      fail: function() {
        console.log("fail")
      }
    })
  },
  checkboxChange(e) {
      this.setData({
        val:!this.data.val
      })
  }
})

html部分

<view class="page">
  <view class="pannel">
    
    <view class="pan-box">
      <!-- 顶部图片 -->
      <view class="img-box"></view>
      <!-- 中部详情 -->
      <view class="mid-box">
        <view class="layer4">
          <view class="layer5"></view>
          <text lines="1" class="word2">学习宣扬贯彻党的十九大</text>
        </view>
        <view class="wrapper">
          <view class="text {{val?'atv':''}}">
            <label class="btn {{val?'atv_label':''}}" bindtap="checkboxChange"></label>
            学习宣传贯彻党的十九大学习宣传贯彻党的十九大学习宣传贯彻党的十九大学习宣传贯彻党的十九大学习宣传贯彻党的十九大学习宣传贯彻党的十九大学习宣传贯彻党的十九大学习宣传贯彻党的十九大学习宣传贯彻党的十九大学习宣传贯彻党的十九大
          </view>
        </view>
        <view class="layer7">
          <view class="group1">
            <text lines="1" class="info2">发起部门：</text>
            <text lines="1" class="txt1">组织部</text>
          </view>
        </view>
        <view class="layer8">
          <view class="layer9">
            <text lines="1" class="info3">活动时间：</text>
            <text lines="1" decode="true" class="word3">2019-08-11&nbsp;09:30&nbsp;&nbsp;~&nbsp;&nbsp;2019-08-12&nbsp;09:30</text>
          </view>
        </view>
        <view class="bm">
            <view class="bm-con">
              <text lines="1" class="bm-1">报名人数：</text>
              <text lines="1" class="bm-2">5/10</text>
            </view>
        </view>
        <a href="#" class="abs">分享@</a>
      </view>
      
      <!-- 底部活动安排 -->
      <view class="layer10">
        <text lines="1" class="word5">活动安排</text>
      </view>
      <view class="layer11">
        <view class="icon1"></view>
        <text lines="1" class="info4">为提高市民文明出行素质为主线</text>
      </view>
      <p  class="paragraph2">组织开展以改善社区环境生为主要内容的志愿活动,组织志愿者广泛参与</p>
      <view class="layer12">
        <view class="icon1"></view>
        <text lines="1" class="info5">解决影响道路交通安全</text>
      </view>
      <p  class="infoBox1">卫生大扫除、清洗乱涂画和“小广告”、清理卫生死角、捡拾垃圾(果皮、纸屑)等活动</p>
    </view>
    
    <!-- 尾部立即报名 -->
    <view class="bottom_button">
      <text lines="1" class="button">立即报名</text>
    </view>
  </view>
</view> 
 

css部分

.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
}
.pannel{
  width: 100%;
  height: 100%;
}
.bottom_button {
  z-index: 35;
  height: 88rpx;
  border: 1px  rgba(226,226,226,1);
  background-color: #F24C4E;
  background-size: 756rpx 94rpx;
  display: flex;
  flex-direction: column;
  padding-left: 318rpx;
  width: 750rpx;
  position: fixed;
  left: 0rpx;
  bottom: 0rpx;
  justify-content: center;
}
.button {
  width: 114rpx;
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(255,255,255,1);
  font-size: 30rpx;
  font-family: SourceHanSansCN-Regular;
  text-align: right;
  white-space: nowrap;
  line-height: 30rpx;
  display: block;
}
.pan-box{
  width: 98%;
  margin: 0 auto;
}
.img-box{
  width: 710rpx;
  height: 375rpx;
  margin: 0 auto;
  margin-top: 40rpx;
  /* background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps503qxduaqopoznzu7hvvey4jeyzpsoyff7217094-3137-40c5-b07d-a244ed812390) -18rpx 0rpx no-repeat; */
  /* background-size: 750rpx 375rpx; */
  background-color: #F24C4E;
  display: flex;
  flex-direction: column;
  border-radius: 15rpx;
}
.layer4 {
  width: 430rpx;
  height: 35rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 30rpx 0 0 35rpx;
}
.layer5 {
  background-color: rgba(206,4,2,1.000000);
  border-radius: 50%;
  width: 16rpx;
  height: 16rpx;
  margin-top: 9rpx;
  display: flex;
  flex-direction: column;
}
.word2 {
  width: 393rpx;
  height: 35rpx;
  overflow-wrap: break-word;
  color: rgba(51,51,51,1);
  font-size: 36rpx;
  font-family: SourceHanSansCN-Bold;
  text-align: left;
  white-space: nowrap;
  line-height: 36rpx;
  display: block;
  font-weight:bold;
}
.layer7 {
  width: 687rpx;
  height: 26rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 13rpx 0 0 35rpx;
}
.group1 {
  width: 191rpx;
  height: 23rpx;
  overflow-wrap: break-word;
  font-size: 0rpx;
  font-family: SourceHanSansCN-Light;
  text-align: left;
  white-space: nowrap;
  line-height: 24rpx;
}
.info2 {
  width: 191rpx;
  height: 23rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 24rpx;
  font-family: SourceHanSansCN-Light;
  text-align: left;
  white-space: nowrap;
  line-height: 24rpx;
}
.txt1 {
  width: 191rpx;
  height: 23rpx;
  overflow-wrap: break-word;
  color: black;
  font-size: 24rpx;
  font-family: SourceHanSansCN-Regular;
  text-align: left;
  white-space: nowrap;
  line-height: 24rpx;
}
.layer8 {
  width: 693rpx;
  height: 25rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 12rpx 0 0 35rpx;
}
.layer9 {
  width: 531rpx;
  height: 23rpx;
  overflow-wrap: break-word;
  font-size: 0rpx;
  font-family: SourceHanSansCN-Light;
  text-align: left;
  white-space: nowrap;
  line-height: 24rpx;
  margin-top: 2rpx;
}
.info3 {
  width: 531rpx;
  height: 23rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 24rpx;
  font-family: SourceHanSansCN-Light;
  text-align: left;
  white-space: nowrap;
  line-height: 24rpx;
}
.word3 {
  width: 531rpx;
  height: 23rpx;
  overflow-wrap: break-word;
  color: black;
  font-size: 24rpx;
  font-family: SourceHanSansCN-Regular;
  text-align: left;
  white-space: nowrap;
  line-height: 24rpx;
}
.bm {
  width: 687rpx;
  height: 26rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 13rpx 0 0 35rpx;
}
.bm-con {
  width: 191rpx;
  height: 23rpx;
  overflow-wrap: break-word;
  font-size: 0rpx;
  font-family: SourceHanSansCN-Light;
  text-align: left;
  white-space: nowrap;
  line-height: 24rpx;
}
.bm-1 {
  width: 191rpx;
  height: 23rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 24rpx;
  font-family: SourceHanSansCN-Light;
  text-align: left;
  white-space: nowrap;
  line-height: 24rpx;
  margin-right: 360rpx;
}
.bm-2 {
  width: 191rpx;
  height: 23rpx;
  overflow-wrap: break-word;
  color: black;
  font-size: 24rpx;
  font-family: SourceHanSansCN-Regular;
  text-align: left;
  white-space: nowrap;
  line-height: 24rpx;
}
.mid-box{
  position: relative;
  /* border: 1px solid black; */
}
.abs{
  text-decoration: none;
  display: block;
  width: 86rpx;
  height: 40rpx;
  color: rgb(235, 10, 10);
  font-size: 24rpx;
  position: absolute;
  bottom: 0rpx;
  right: 10rpx;
  /* border: 1px solid black; */
}
.layer10 {
  border-radius: NaNrpx;
  height: 69rpx;
  display: flex;
  flex-direction: column;
  width: 195rpx;
  margin: 20rpx 0 0 4rpx;
  padding: 10rpx 0 0 29rpx;
}
.word5 {
  width: 143rpx;
  height: 42rpx;
  overflow-wrap: break-word;
  color: rgba(255,255,255,1);
  font-size: 26rpx;
  background-color: rgba(242,76,78,1.000000);
  border-radius: 20rpx 0 20rpx 0;
  font-family: SourceHanSansCN-Bold;
  text-align: center;
  line-height: 42rpx;
  display: block;
  justify-content: center;
  text-align: center;
}
.layer11 {
  width: 444rpx;
  height: 30rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 1rpx 0 0 35rpx;
}
.icon1 {
  width: 9rpx;
  height: 20rpx;
  margin-top: 6rpx;
  background-color: red;
}
.info4 {
  width: 419rpx;
  height: 30rpx;
  overflow-wrap: break-word;
  color: rgba(36,45,57,1);
  font-size: 30rpx;
  font-family: SourceHanSansCN-Bold;
  text-align: left;
  white-space: nowrap;
  line-height: 30rpx;
  display: block;
  font-weight: bold;
}
.paragraph2 {
  width: 624rpx;
  color: rgba(36,45,57,1);
  font-size: 28rpx;
  font-family: SourceHanSansCN-Normal;
  text-align: left;
  display: block;
  margin: 15rpx 0 0 60rpx;
}
.layer12 {
  width: 324rpx;
  height: 30rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 42rpx 0 0 35rpx;
}
.label2 {
  width: 9rpx;
  height: 20rpx;
  margin-top: 6rpx;
}
.info5 {
  width: 300rpx;
  height: 30rpx;
  overflow-wrap: break-word;
  color: rgba(36,45,57,1);
  font-size: 30rpx;
  font-family: SourceHanSansCN-Bold;
  text-align: left;
  white-space: nowrap;
  line-height: 30rpx;
  display: block;
  font-weight: bold;
}
.infoBox1 {
  width: 642rpx;
  color: rgba(36,45,57,1);
  font-size: 28rpx;
  font-family: SourceHanSansCN-Normal;
  text-align: left;
  display: block;
  margin: 15rpx 0 0 60rpx;
}
.wrapper {
  display: flex;
  margin: 15rpx auto;
  width: 677rpx;
  overflow: hidden;
}
.text {
  margin: 0 auto;
  padding: 0;
  font-size: 24rpx;
  color: rgba(153, 153, 153, 1);
  overflow: hidden;
  text-overflow: clip;
  text-align: left;
  position: relative;
  line-height: 39rpx;
  max-height: 80rpx;
}
.text::before {
  content: '';
  height: calc(100% - 23px);
  float: right;
}
.btn {
  /* border: 1rpx solid black; */
  position: relative;
  float: right;
  clear: both;
  margin:0;
  font-size: 24rpx;
  padding: 0 ;
  /* padding-top: 1rpx; */
  line-height: 38rpx;
  height: 30rpx;
  color: rgb(233, 16, 16);
}
.btn::before {
  content: '';
  position: absolute;
  left: -5rpx;
  color: rgb(10, 1, 1);
  transform: translateX(-100%)
}
.btn::after {
  content: '[展开]'
}
.atv {
  max-height: none;
}
.atv_label::after {
  content: '[收起]'
}
.atv_label::before {
  /*在展开状态下隐藏省略号*/
  visibility: hidden;
}

微信小程序实现文本的展开与收起的更多相关文章

  1. [微信小程序] 微信小程序富文本-wxParse的使用

    最近小程序蛮火的,公司要做于是学了一点点小程序 不知道你们有没有遇到过这种问题: 从公司服务器获取的文章内容是有HTML标签格式的一段内容,但是微信是不支持这些标签的,怎么办呢? 1.一般网站后台的文 ...

  2. 微信小程序rich-text 文本首行缩进和图片居中

    微信小程序开发使用rich-text组件渲染html格式的代码,常常因为不能自定义css导致文本不能缩进,以及图片不能居中等问题,这里可以考虑使用js的replace方法,替换字符串,然后在渲染的同时 ...

  3. 微信小程序富文本渲染组件html2wxml及html2wxml代码块格式化在ios下字体过大问题

    1.组件使用: 之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:http ...

  4. 微信小程序-富文本解析插件wxParse基础使用及问题解决

    一.插件准备 在github上可以直接下载该插件:https://github.com/icindy/wxParse 二.基本使用 1.将插件导入项目: 将wxParse文件夹放在项目目录下,如图: ...

  5. 微信小程序富文本中的图片大小超出屏幕

    这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi,   '& ...

  6. 微信小程序 - 文字收缩与展开

    wxml <view class='containers'> <text class="content {{ellipsis?'ellipsis':'unellipsis' ...

  7. 微信小程序开发——文本框种输入手机号，点击获取验证码无反应的处理方法

    异常描述: 如下图,输入手机号码之后,点击右侧的获取验证码,在开发工具是OK的,真机测试无反应: 页面编码跟H5差不多的,H5没出现这个问题,但是小程序就不一样了. 异常分析: 页面结构层面,为了方便 ...

  8. 微信小程序 富文本插件 循环渲染方式

    感谢GitHub https://github.com/icindy/wxParse/wiki/wxParse%E5%A4%9A%E6%95%B0%E6%8D%AE%E5%BE%AA%E7%8E%AF ...

  9. 微信小程序富文本

    <div class="weui-panel__bd pad-all fs13 " > <rich-text nodes="{{detail.conte ...

随机推荐

  1. scanf报错问题

    VS2013 scanf()函数报错问题. 编译器就是说这个环境下用scanf()函数不安全,建议使用scanf_s()函数.如何要使用scanf()函数的话,就需要在头文件或者源文件开头加上:use ...

  2. [开发笔记usbTOcan]软件需求分析和软件架构设计

    前面文章进行了系统分析和系统架构设计,手工焊接了一个板子,集合EK-TMC123GXL开发板(请忽略焊接技术) SWE.1 | 软件需求分析 软件需求分析过程的目的是将系统需求的软件相关部分转化为一组 ...

  3. C# 余一问题 奇偶数求和问题

    编写程序,用 while 循环语句实现下列功能:有一篮鸡蛋,不止一个,有人两个两个数,多余一个,三个三个数,多余一个,再四个四个地数,也多余一个,请问这篮鸡蛋至少有多少个. using System; ...

  4. manjora20不小心卸载，重新安装terminal，软件商店/软件中心linux类似

    问题 重新安装老版本gnome-shell 如果突然死机可能卸载完了terminal和软件商店,但是没有安装新的. 此时没有terminal也没有软件商店 无法安装软件 解决方案 terminal c ...

  5. 一起看看MySQL中的隐藏列

    摘要:在mysql的多版本并发控制mvcc中,我们知道mysql中存在一些隐藏列,例如行标识.事务ID.回滚指针等,不知道大家是否和我一样好奇过,要怎样才能实际地看到这些隐藏列的值呢? 本文分享自华为 ...

  6. request.getServletContext()爆红问题

    ServletRequest的getServletContext方法是Servlet3.0添加的,这个可以看一下官方文档 http://docs.oracle.com/javaee/6/api/jav ...

  7. HTTPS加密证书(1)

    目录 一:HTTPS 1.HTTPS简介 二:模拟网站劫持 1.正常的页面(web01) 2.文件增加权限 3.编写文件网址配置 4.网址测试 三:安装鲨鱼鳍(抓取数据包) 四:(网站劫持)lb代理 ...

  8. ZooKeeper 授权访问

    ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...

  9. python小兵之时间模块

    Python  日期和时间 Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Python 提供了一个 time 和 calendar 模块可以用于格式化日期和时间. 时间 ...

  10. Java 锁 概念介绍

    一   Java中的锁是什么? /* * 一 Java锁定义? * 在计算机科学中,锁(lock)或互斥(mutex)是一种同步机制,用于在有许多执行线程的环境中强制对资源的访问限制. * 锁旨在强制 ...