标签：flex font 程序实现 微信 height width text 文本 color
致谢 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 09:30 ~ 2019-08-12 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; }
标签：flex,font,程序实现,微信,height,width,text,文本,color 来源： https://www.cnblogs.com/aaa1122js/p/15934624.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。