增加折叠效果

pages/resource/articeDetail.vue

@@ -14,10 +14,11 @@
 			</view>
 			<view class="adetail-body">
 				 <!-- class="ql-container" -->
-				<view class="ql-container">
+				<view class="ql-container more-info"  :style="{height:articleMore? '500upx':'auto'}">
 					<!-- class="ql-editor" -->
 					<u-parse class="ql-editor" :content="detail.content" :tagStyle="style"></u-parse>
 				</view>
+				<view v-if="articleMore && detail.content.length>200" @click="showMore" style="text-align: center;color: #387DF7;"><text>查看更多∨</text> </view>
 				<!-- <view v-if="userInfo.aid==detail.sysCreateAid" style="display: flex;justify-content: flex-end;color: #b1b1b1;padding-top: 10px;">
 					<u-icon @click="toEdit" name="edit-pen-fill" label="编辑"></u-icon>
 					<u-icon @click="del" style="margin-left: 20px;" name="trash" label="删除"></u-icon>
@@ -43,6 +44,7 @@
 				page:1,//当前页数
 				pagesize:10, //总页数
 				fileUrl:this.$config.fileUrl,
+				articleMore:true,
 				style: {
 					// 字符串的形式
 					p: 'word-break:break-all;font-size: 28upx;letter-spacing:1rpx; line-height: 1.6;margin-bottom:25px',
@@ -128,6 +130,9 @@
 					setTimeout(function(){ uni.hideLoading() },100);
 				})
 			},
+			showMore(){
+				this.articleMore=false;
+			},
 			commentSuccess(rs){
 				//console.log(rs,'success');
 				this.$refs.comComments.loadData(false);
@@ -245,6 +250,20 @@
 			}
 		}
 	}
+	.more-info{overflow: hidden; position: relative;}
+	.more-info::after{
+	    content: '';
+	    position: absolute;
+	    width: 100%;
+	    height: 30px;
+	    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
+	    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+	    background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+	    background: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0ff, endColorstr=#fff, GradientType=0);
+	    bottom: 0;
+	    left: 0;
+	}
 	.ql-container {
 	  display: block;
 	  position: relative;