微信小程序实现文本的展开与收起

// 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

      })

  }

})

<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>