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

效果圖

程式碼

js部分

//pages/volunteer/active/info/activeInfo.js constapp=getApp(); Page({
/** *頁面的初始資料 */ data:{ active:{},//活動詳情 val:false },
/** *生命週期函式--監聽頁面載入 */ onLoad:function(options){ letid=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部分

<viewclass="page">
<viewclass="pannel"> <viewclass="pan-box"> <!--頂部圖片--> <viewclass="img-box"></view>
<!--中部詳情--> <viewclass="mid-box">
<viewclass="layer4"> <viewclass="layer5"></view> <textlines="1"class="word2">學習宣揚貫徹黨的十九大</text> </view>
<viewclass="wrapper"> <viewclass="text{{val?'atv':''}}"> <labelclass="btn{{val?'atv_label':''}}"bindtap="checkboxChange"></label> 學習宣傳貫徹黨的十九大學習宣傳貫徹黨的十九大學習宣傳貫徹黨的十九大學習宣傳貫徹黨的十九大學習宣傳貫徹黨的十九大學習宣傳貫徹黨的十九大學習宣傳貫徹黨的十九大學習宣傳貫徹黨的十九大學習宣傳貫徹黨的十九大學習宣傳貫徹黨的十九大 </view> </view>
<viewclass="layer7"> <viewclass="group1"> <textlines="1"class="info2">發起部門：</text> <textlines="1"class="txt1">組織部</text> </view> </view>
<viewclass="layer8"> <viewclass="layer9"> <textlines="1"class="info3">活動時間：</text> <textlines="1"decode="true"class="word3">2019-08-11&nbsp;09:30&nbsp;&nbsp;~&nbsp;&nbsp;2019-08-12&nbsp;09:30</text> </view> </view>
<viewclass="bm"> <viewclass="bm-con"> <textlines="1"class="bm-1">報名人數：</text> <textlines="1"class="bm-2">5/10</text> </view> </view>
<ahref="#"class="abs">分享@</a> </view> <!--底部活動安排--> <viewclass="layer10"> <textlines="1"class="word5">活動安排</text> </view>
<viewclass="layer11"> <viewclass="icon1"></view> <textlines="1"class="info4">為提高市民文明出行素質為主線</text> </view>
<pclass="paragraph2">組織開展以改善社群環境生為主要內容的志願活動,組織志願者廣泛參與</p>
<viewclass="layer12"> <viewclass="icon1"></view> <textlines="1"class="info5">解決影響道路交通安全</text> </view>
<pclass="infoBox1">衛生大掃除、清洗亂塗畫和“小廣告”、清理衛生死角、撿拾垃圾(果皮、紙屑)等活動</p>
</view> <!--尾部立即報名--> <viewclass="bottom_button"> <textlines="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:1pxrgba(226,226,226,1); background-color:#F24C4E; background-size:756rpx94rpx; 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:0auto; }
.img-box{ width:710rpx; height:375rpx; margin:0auto; margin-top:40rpx; /*background:url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps503qxduaqopoznzu7hvvey4jeyzpsoyff7217094-3137-40c5-b07d-a244ed812390)-18rpx0rpxno-repeat;*/ /*background-size:750rpx375rpx;*/ 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:30rpx0035rpx; }
.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:13rpx0035rpx; } .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:12rpx0035rpx; } .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:13rpx0035rpx; } .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:1pxsolidblack;*/ }
.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:1pxsolidblack;*/ }
.layer10{ border-radius:NaNrpx; height:69rpx; display:flex; flex-direction:column; width:195rpx; margin:20rpx004rpx; padding:10rpx0029rpx; }
.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:20rpx020rpx0; 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:1rpx0035rpx; } .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:15rpx0060rpx; } .layer12{ width:324rpx; height:30rpx; flex-direction:row; display:flex; justify-content:space-between; margin:42rpx0035rpx; } .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:15rpx0060rpx; }
.wrapper{ display:flex; margin:15rpxauto; width:677rpx; overflow:hidden; } .text{ margin:0auto; 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:1rpxsolidblack;*/ 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; }