小程序消息提醒页手风琴效果（uni-app）

图片效果：

 

 

 

没弄动图，简单的描述一下效果：任意点击一条数据的全文，展示全部内容，点击关闭就关闭当前数据，如果没有打开后没有关闭，就点击另一条数据展开，上一条未关闭数据自动关闭

代码如下：暂时我只考虑最后的效果，没有考虑别的情况，写的不好的地方请多指教

 

view代码：

<template>
    <view class="box">
        <view class="message" v-if="listMessage.length>0" v-for="(value,index) in listMessage" :key="index">
            <view class="Text">
                <view class="pic">
                    <u-icon name="chat" color="#2081F6" size="34"></u-icon>
                    <text class="title">{{value.MessageType}}</text>
                </view>
                <view class="Time">
                    <text>{{value.CreateDate}}</text>
                </view>
            </view>
            
            <view class="details">
                <view class="Text">{{value.Title}}</view>
                <view class="textDetails" :class="value.checked ? 'True':'False'">　　　　// ：class 写的是样式，为true时，显示True ，为false时，显示False的样式，我这里checked默认是true
                    测试当前的数据是否显示正常测试当前的数据是否显示正常测试当前的数据是否显示正常　　// 接口拿到的内容不够测试时凑的字数
                    测试当前的数据是否显示正常测试当前的数据是否显示正常测试当前的数据是否显示正常
                    {{value.Content}}
                </view>
                <view class="btu" @click="isShowClick(index,value.checked)">{{value.checked ? '全文':'关闭'}}</view>　　// checked 接口里没有是我自己forEach循环添加的，用来做打开还是关闭的状态判断
            </view>
        </view>
        <!-- 当没有消息通知的时候显示 -->
        <view v-else-if="listMessage.length==0" class="noMessage">
            <view>暂无消息通知</view>
        </view>
    </view>
</template>

 

scss样式：

page {
    background-color: #F8F8F8;
}　　
.box {
    padding: 30upx;
    .message {
        background-color: #FFFFFF;
        padding: 10upx 20upx 20upx 20upx;
        margin-bottom: 20upx;
        >.Text {
            display: flex;
            justify-content: space-between;
            >.pic {
                >.title {
                    padding-left: 12upx;
                    font-size: 28upx;
                    line-height: 50upx;
                }
            }
            >.Time {
                color: #999999;
                font-size: 24upx;
                line-height: 50upx;
            }
        }
        >.details {
            border-top: 2upx solid #F1F1F1;
            >.Text {
                font-size: 28upx;
                font-weight: bold;
                line-height: 50upx;
            }
            >.textDetails {
                font-size: 24upx;
                line-height: 34upx;
            }
            >.btu {
                color: #999999;
                font-size: 24upx;
                line-height: 34upx;
                padding-top: 10upx;
            }
        }
    }
    // 没有消息的时候进行显示
    >.noMessage {
        text-align: center;
        font-size: 34upx;
        color: #999999;
        margin-top: 40upx;
    }
}
// 控制是否显示消息详情
.True {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;　　// 为true时，默认显示两行
}
.False {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 500;　　// 为false时，最大显示500行，根据需求自己调整就行
}

 

js代码：

export default {
    data() {
        return {
            listMessage:[],        // 保存消息列表
        }
    },
    onLoad() {
        this.getMessage()
    },
    methods: {
        // 点击是否显示全文
　　　　    isShowClick(index,checked){
            this.listMessage.map((value)=>{　　// 点击的时候判断这个数组里的每一条数据的checked的值是否有打开状态的，有就关闭它
                if(value.checked == false) {
                    value.checked = true
                }
            })
            this.listMessage[index].checked = ! checked　　// 然后true取反为false，打开当前点击的数据的详情
            var newItem = this.listMessage[index]
            this.$set(this.listMessage,index,newItem)
            console.log('更改后的数组：',this.listMessage)
　　　　    },
        
        // 获取消息列表
        getMessage() {
            var that = this
            this.requestToken('接口','POST',{},(res)=>{　　　　// this.requestToken 是自己封装的全局方法
                that.listMessage = res.data.Data.rows
                 that.listMessage.forEach((value, index) => {
                      value["checked"] = true;　　　　// 新增checked字段，默认值为true
                  });
                console.log('消息列表：',that.listMessage)
            })
        }
    }
}