circle-card

nova-werun/components/circle-card/index.js

@@ -41,9 +41,12 @@ Component({
         commenttext: "评论",
         focusedCommentId: null,
         isCommentFocused: false,
-        noCommentCount:0,
+        noCommentCount: 0,
         //
-        showconfirm:false
+        showconfirm: false,
+        //
+        maxLength: 100, // 设置最大长度
+        showFull: false, // 控制是否显示完整内容
     },
     lifetimes: {
 
@@ -128,7 +131,7 @@ Component({
             this.setData({
                 time
             })
-            console.log('时间',time);
+            console.log('时间', time);
             this.showchick()
         },
         formatTime(timestamp) {
@@ -149,12 +152,12 @@ Component({
         },
         formatDate2(date1) {
             date1 = new Date(date1);
-    
+
             // 获取年份、月份和日期
             const year1 = date1.getFullYear();
             const month1 = date1.getMonth() + 1; // 月份从0开始，所以要加1
             const day1 = date1.getDate();
-    
+
             // 返回格式化的字符串
             return `${year1}/${month1}/${day1}`;
         },
@@ -250,7 +253,7 @@ Component({
             Momentquery.equalTo('isLiked', true);
             let r = await Momentquery.find();
             let chickList = r.map(item => item.toJSON());
-            console.log('chickList',chickList);
+            console.log('chickList', chickList);
             this.setData({
                 chickList
             })
@@ -418,7 +421,7 @@ Component({
             if (!this.data.isCommentFocused) { // 只有在没有评论聚焦时才重置
                 const updatedCommentList = this.data.commentList.map(comment => ({
                     ...comment,
-                    showdeletid: false ,// 重置所有评论的 showdeletid
+                    showdeletid: false, // 重置所有评论的 showdeletid
                 }));
 
                 this.setData({
@@ -533,21 +536,34 @@ Component({
 
         },
         //显示确认框
-        showconfirm(){
+        showconfirm() {
             this.setData({
-                showconfirm:true
+                showconfirm: true
             })
         },
         //取消确认框
-        cancleconfirm(){
+        cancleconfirm() {
             this.setData({
-                showconfirm:false
+                showconfirm: false
             })
         },
         //点击确认
-        clickconfirm(){
+        clickconfirm() {
             console.log('删除了');
             this.deletecircle()
-        }
+        },
+        // 显示完整内容
+        showFullContent() {
+            this.setData({
+                showFull: true
+            });
+        },
+
+        // 收起内容
+        showLessContent() {
+            this.setData({
+                showFull: false
+            });
+        },
     }
 })

nova-werun/components/circle-card/index.less

@@ -417,11 +417,25 @@
     .text{
         width: 100%;
         font-size: 26rpx;
-        margin-top: 50rpx;
+        margin-top: 30rpx;
         .contentbox{
             width: 100%;
-            max-height: 200rpx;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 4;
+            text-overflow: ellipsis;
+        }
+        .quanwen{
+            font-size: 26rpx;
+            color: #CDCDD2;
+            margin-top: 20rpx;
         }
+    }
+    .full-content{
+        width: 100%;
+        font-size: 26rpx;
+        margin-top: 30rpx;
         .quanwen{
             font-size: 26rpx;
             color: #CDCDD2;

nova-werun/components/circle-card/index.wxml

@@ -105,11 +105,22 @@
             关注
         </view>
     </view>
-    <view wx:if="{{type=='surface'}}" class="text" bindtap="gourl" data-url="../../pages/circle/circle-detail/index" data-id="{{cicleList[0].objectId}}">
-        <view class="contentbox">
+    <view wx:if="{{!showFull}}" class="text">
+        <view wx:if="{{cicleList[0].content.length > maxLength}}">
+            <view class="contentbox">{{cicleList[0].content}}</view>
+            <text bindtap="showFullContent" class="quanwen">查看全文</text>
+        </view>
+        <view wx:if="{{cicleList[0].content.length <= maxLength}}">
+            <view class="contentbox">{{cicleList[0].content}}</view>
+        </view>
+    </view>
+
+    <!-- 全文内容 -->
+    <view wx:if="{{showFull}}" class="full-content">
+        <view bindtap="gourl" data-url="../../pages/circle/circle-detail/index" data-id="{{cicleList[0].objectId}}">
             {{cicleList[0].content}}
         </view>
-        <view class="quanwen">查看全文</view>
+        <text bindtap="showLessContent" class="quanwen">收起</text>
     </view>
 
     <!-- 图片 -->