微信小程序实现文本的展开与收起
2022/2/25 11:21:47
本文主要是介绍微信小程序实现文本的展开与收起，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
致谢 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; }
这篇关于微信小程序实现文本的展开与收起的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-24微信小程序资料入门指南
- 2024-12-20微信小程序开发入门指南
- 2024-12-20小程序 createCameraContext() 怎么实现识别条形码功能？-icode9专业技术文章分享
- 2024-11-22微信小程序的接口信息py可以抓到吗？-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数？-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接？-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置？-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗？-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号？-icode9专业技术文章分享
