微信小程序 文字 展开 收起功能

网上一搜其实蛮多的。

但是 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 写的，所以在格式上和微信小程序 正统写法不一样，这个需要自己改了