网上一搜其实蛮多的。
但是 type="checkbox"微信小程序似乎不能用,他会吊起一个手机键盘
<input id="exp" class="exp" type="checkbox">
代码的“拿来吧你” 竟然不能用了。。。。。
随后自己经过多方借鉴:
实现了一波拿来吧你
<view :class="introductFlag?' text foldIntroduct':'text'">
<label class="btn" @click="fold"></label>
{{info.workContent}}
</view>
introductFlag:false,//设置点击时,是否出现全文还是出现省略号和展开按钮
fold(e){
this.introductFlag= !this.introductFlag
},
.wrapper {
display: flex;
width: 100%;
overflow: hidden;
.text {
font-size: 26rpx;
overflow: hidden;
text-overflow: ellipsis;
text-align: justify;
/* display: flex; */
/* display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; */
position: relative;
line-height: 1.5;
max-height: 4.5em;
transition: .3s max-height;
}
.text::before {
content: '';
height: calc(100% - 38rpx);
float: right;
}
.text::after {
content: '';
width: 999vw;
height: 999vw;
position: absolute;
box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
margin-left: -100px;
}
.btn{
position: relative;
float: right;
clear: both;
margin-left: 20px;
font-size: 26rpx;
padding: 0 2px;
// background: #3F51B5;
// line-height: 24px;
// border-radius: 4px;
color: #F18D00 ;
cursor: pointer;
/* margin-top: -30px; */
}
.btn::after{
content:'展开'
}
.exp{
display: none;
}
.btn::before{
content: '...';
position: absolute;
left: -5px;
color: #333;
transform: translateX(-100%)
}
.foldIntroduct{ //出现此样式名时,设置不出现省略号和展开按钮
-webkit-line-clamp:inherit!important;
max-height: none !important;
}
.foldIntroduct::after{
visibility: hidden;
}
.foldIntroduct .btn::before{
visibility: hidden;
}
.foldIntroduct .btn::after{
content:'收起'
}
}
因为是uniapp 写的,所以在格式上和微信小程序 正统写法不一样,这个需要自己改了