Wechat applet realizes the expansion and retraction of text

Time:2022-5-9

thank https://www.jianshu.com/p/9458083214cc

1. Renderings

 

 

2. JS code

// pages/volunteer/active/info/activeInfo.js
const app = getApp();
Page({

  /**
   *Initial data of the page
   */
  data: {
    Active: {}, // activity details
    val:false
  },

  /**
   *Life cycle function -- listening for page loading
   */
  onLoad: function (options) {
    let id = options.id;
    //Get activity details
    console.info("onReady")
    this.getActiveData(id);
  },

  /**
   *Life cycle function -- monitor the completion of the first rendering of the page
   */
  onReady: function () {
  },

  /**
   *Life cycle function -- monitor page display
   */
  onShow: function () {
    console.info("onshow")
  },

  /**
   *Life cycle function -- listening for page hiding
   */
  onHide: function () {

    console.info("onHide")
  },

  /**
   *Life cycle function -- monitor page unloading
   */
  onUnload: function () {

    console.info("onUnload")
  },

  /**
   *Page related event handling function -- listening to user drop-down actions
   */
  onPullDownRefresh: function () {

    console.info("onPullDownRefresh")
  },

  /**
   *Handler for bottom pull event on page
   */
  onReachBottom: function () {

    console.info("onReachBottom")
  },

  /**
   *Users click on the upper right corner to share
   */
  onShareAppMessage: function () {

  },

  
  //Get recommendations
  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
      })
  }


})

 

3. HTML code

Study, publicize and implement the 19th CPC National Congress
        

        
          
            
            Study, publicize and implement the 19th CPC National Congress study, publicize and implement the 19th CPC National Congress study, publicize and implement the 19th CPC National Congress study, publicize and implement the 19th CPC National Congress study, publicize and implement the 19th CPC National Congress study, publicize and implement the 19th CPC National Congress study, publicize and implement the 19th CPC National Congress study, publicize and implement the 19th CPC National Congress study, publicize and implement the 19th CPC National Congress
          
        

        
          
            Initiating Department:
            Organization Department
          
        

        
          
            Activity time:
            2019-08-11 09:30  ~  2019-08-12 09:30
          
        

        
            
              Number of applicants:
              5/10
            
        

        [email protected]
      
      
      
      
        Activity arrangement
      

      
        
        In order to improve citizens' civilized travel quality
      

      Organize and carry out voluntary activities focusing on improving community environmental health, and organize volunteers to participate widely

      
        
        Solve problems affecting road traffic safety
      

      Clean up, clean up graffiti and "small advertisements", clean up sanitary dead corners, pick up garbage (peel, paper scraps) and other activities

    
    
    
    
      Sign up now

 

4. CSS code

.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: '[expand]'
}

.atv {
  max-height: none;
}

.atv_label::after {
  Content: '[stow]'
}

.atv_label::before {
  /*Hide ellipsis in expanded state*/
  visibility: hidden;
}