uniapp nvue 仿抖音评论

评论框-组件
<template>
    <!-- @tap=";" @mousemove=";" :style="'bottom:'+KeyboardHeight+'px;'" -->
    <view>
        <view class="comment_mask" :style="maskStyle" @tap.stop="maskCancel"></view>
        <view :class="{'input':isMaskContentStyle==true,'onInput':isMaskContentStyle==false}"
            class="comment_mask_content" :style="inputStyle" @tap.stop=";" @click.stop=";">
            <view class="comment_input">
                <u-icon name="edit-pen" v-if="isIcon" color="#999999" size="20"></u-icon>
                <textarea v-if="!isMaskContentStyle" ref="textarea" class="textarea" @focus="focusTextarea"
                    :value="innerValue" :adjust-position="false" placeholder-style="color: #999999;" confirm-type="send"
                    :placeholder="placeholderValue" auto-height :focus="true" v-model="innerValue" @confirm="confirm"
                    @keyboardheightchange="keyboardheightchange"></textarea>
                <!--                 <u--input v-if="isMaskContentStyle" @focus="inputFocus" placeholder="说点什么..." :adjustPosition="false"
                    border="none" shape="circle"></u--input> -->
                <view v-if="isMaskContentStyle" style="flex: 1;" @tap="inputFocus">
                    <text
                        style="font-size: 26rpx;font-family: PingFang SC;font-weight: 400;color: #999999;padding-top: 10rpx;">说点什么...</text>
                </view>
            </view>
            <view v-if="!isMaskContentStyle" class="comment_send" @tap.stop="saveComment">
                <image class="comment_send_img" :src="require('@/static/icons/send-out.png')"></image>
            </view>
        </view>
    </view>
</template>
<script>
    import {
        mapGetters
    } from "vuex"
    export default {
        name: "CommentTextarea",
        props: {
            placeholderText: {
                type: String,
                default: "说点什么..."
            },
            value: {
                type: String,
                default: ""
            },
            newsId: {
                type: String,
                default: ""
            },
            isOnInput: {
                type: Boolean,
                default: true
            },
            replayName: {
                type: Object,
                default: {}
            }
        },
        data() {
            return {
                KeyboardHeight: 0,
                location: "fixed;",
                innerValue: "",
                maskStyle: '',
                isMaskContentStyle: true,
                isIcon: true,
                placeholderValue: "",
                postsId: "",
                replayData: {},
                isReply: false, //是否处于回复的状态
                tempData: {},
                tempId: "",
                inputStyle: "position: fixed;left: 0;right: 0;bottom: 0;"
            };
        },
        watch: {
            replayName: {
                immediate: true,
                handler(newVal, oldVal) {
                    if (Object.keys(newVal).length === 0) {
                        return
                    }
                    console.log("得到需要回复的消息", newVal);
                    // this.isMaskContentStyle = false;
                    this.isReply = true;
                    this.replayData = newVal;
                    this.placeholderValue = `回复:@${this.replayData.replayName}`;
                    this.innerValue = this.tempData[this.replayData.replyUserID] || "";
                    this.maskStyle = "background-color: rgba(125, 125, 125, 0.3);position: fixed;";

                },
            },
            isOnInput: {
                immediate: true,
                handler(newVal, oldVal) {
                    this.isMaskContentStyle = newVal;
                },
            },
            newsId: {
                immediate: true,
                handler(newVal, oldVal) {
                    console.log("帖子ID", newVal)
                    this.postsId = newVal;
                },
            },
            value: {
                immediate: true,
                handler(newVal, oldVal) {
                    this.innerValue = newVal;
                },
            },
            placeholderText: {
                immediate: true,
                handler(newVal, oldVal) {
                    this.placeholderValue = newVal;
                },
            }
        },
        methods: {
            focusTextarea() {

            },
            /**
             * 取消输入
             * */
            maskCancel() {
                let that = this;
                setTimeout(() => {
                    that.tempData[that.isReply?that.replayData.replyUserID:that.tempId] = that.innerValue;
                    that.isMaskContentStyle = true;
                    that.inputStyle = `position: fixed;left: 0;right: 0;bottom: 0;`
                    that.maskStyle = "background-color: rgba(125, 125, 125, 0);position: static;";
                    uni.hideKeyboard();
                    that.innerValue = "";
                    that.isIcon = true;
                    that.isReply = false;
                    that.replayData = {};
                    console.log("回复状态---取消", that.isReply)
                }, 100);
            },
            /**
             * 取消输入
             * */
            confirm(event) {
                console.log("完成", event);
                this.saveComment();
            },
            inputFocus() {
                if (!this.userID) {
                    //这里判断用户是否登录
                    return;
                }
                let that = this;
                that.isReply = false;
                that.innerValue = that.tempData[that.tempId] || "";
                that.placeholderValue = `说点什么...`;
                that.maskStyle = "background-color: rgba(125, 125, 125, 0.3);position: fixed;";
                that.isMaskContentStyle = false;
                that.isIcon = false;
                that.inputStyle = `position: fixed;left: 0;right: 0;bottom: 0;`
            },
            /**
             * 保存输入
             * */
            saveComment() {
                let that = this;
                if (this.innerValue.trim().length <= 0) {
                    return;
                }
                if (Object.keys(that.replayData).length === 0 && !this.isReply) {
                    const param = {
                        "userID": this.userID,
                        "newsID": this.postsId,
                        "content": this.innerValue
                    }
                    //保存方法

                } else {
                    const param = {
                        "userID": this.userID,
                        "replyUserID": this.replayData.replyUserID,
                        "newsID": this.postsId,
                        "criticismReplyID": this.replayData.criticismID,
                        "content": this.innerValue
                    }
                    //回复评论保存方法
                }
            },
            keyboardheightchange(e) {
                this.inputStyle = `position: fixed;left: 0;right: 0;bottom: ${e.detail.height};`
            },
            getUUID() {
                return "xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
                    const r = (Math.random() * 16) | 0;
                    const v = c === "x" ? r : (r & 0x3) | 0x8;
                    return v.toString(16);
                });
            }
        },
        computed: {
            ...mapGetters(['columnID', 'userID']),
            i18n() {
                return i18n.t('columnAutoRefresh')
            }
        },
        mounted() {
            let that = this;
            this.maskStyle = "background-color: rgba(125, 125, 125, 0);position: static;";
            this.tempId = that.getUUID();
        },
        beforeDestroy() {}
    }
</script>

<style lang="scss" scoped>
    .comment_mask {
        // 
        position: fixed;
        background-color: rgba(125, 125, 125, 0);
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
    }

    .comment_mask_content {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #FFFFFF;
        border-top: 1rpx #EEEEEE solid;
        display: flex;
        flex-direction: row;
        align-items: center;
        z-index: 99999999999;


        .comment_input {
            margin: 30rpx 30rpx 30rpx 30rpx;
            border-radius: 30rpx;
            background: #EEEEEE;
            border: #EEEEEE 1rpx solid;
            padding: 10rpx;
            display: flex;
            flex-direction: row;
            flex: 12;
        }

        .textarea {
            font-size: 36rpx;
            font-family: PingFang SC;
            color: #2E2D2D;
        }
    }

    .onInput {
        border-top-left-radius: 30rpx;
        border-top-right-radius: 30rpx;
    }

    .input {
        border-top-left-radius: 0rpx;
        border-top-right-radius: 0rpx;
    }

    .comment_send {
        margin-right: 30rpx;
        flex: 1;

        &:active {
            background-color: rgba(195, 193, 193, 0.1);
        }
    }

    .comment_send_img {
        width: 50rpx;
        height: 50rpx;
    }

    //"
</style>

评论展示列表组件
<template>
    <view class="comments-card" v-if="commentContents.length>0">
        <view class="header">
            <u-sticky>
                <u-tabs-icon :list="tabList" class="tabs"
                    :activeStyle="{color: '#2E66B1',fontWeight:'bold',fontSize:'32rpx'}"
                    :inactiveStyle="{color: '#333',fontWeight:'bold',fontSize:'32rpx'}" :current="tabsCurrent"
                    itemStyle="padding-left: 0rpx;height: 85rpx;padding:0rpx;" @change="tabsChangeHandler">
                </u-tabs-icon>
            </u-sticky>
        </view>
        <view class="list-wrapper">
            <view class="comment-content">
                <view class="total-comments">
                    <text class="total-comments-text">{{commentContents.length}}评论</text>
                </view>
                <view class="comments">
                    <list ref="list">
                        <cell class="comments-items" v-for="(item, index) in commentContents" :key="index">
                            <view class="comments-body">
                                <!-- 顶级评论 -->
                                <view class="top-comments" :data-index="index" :data-type="0"
                                    :data-criticismID="item.criticismID"
                                    @tap.stop="replay(item.criticismID,item.userName,item.userID,index)"
                                    @longpress.stop="longTapSelect" @longTap.stop="longTapSelect">
                                    <image :src="item.face" v-if="item.userIcon" class="comments-face"></image>
                                    <u-avatar v-else :text="truncateCharacter(item.userName)"></u-avatar>
                                    <view class="top-comments-info">
                                        <view class="comments-header">
                                            <text class="comments-header-text">{{item.userName}}</text>
                                            <text class="comments-header-text" v-if="item.isAuthor==0"
                                                style="background-color: #316AB9;color: #FFFFFF;margin-left: 8rpx;padding: 2rpx 5rpx 2rpx 5rpx;border-radius: 3rpx;">作者</text>
                                        </view>
                                        <view class="comments-content">
                                            <text class="comments-content-text">{{item.content}}</text>
                                        </view>
                                        <view class="comments-info">
                                            <text
                                                class="grey">{{dateFormat(item.createTime,item.isWaterArmy==0)}}</text>
                                            <!--                                             <text class="comments-replay-btn"
                                                @tap.stop="replay(item.criticismID,item.userName,item.userID,index)">回复</text> -->
                                            <text class="comments-replay-btn">回复</text>
                                        </view>
                                    </view>
                                </view>
                                <!-- 回复 -->
                                <view class="comments-reply">
                                    <view class="comments-items top-comments"
                                        v-for="(item2, index2) in replyList[index]" :key="index2" :data-index="index2"
                                        :data-criticismID="item2.criticismID" :data-type="1" :data-parentIndex="index"
                                        :data-parentCriticismId="item.criticismID"
                                        @tap.stop="replay(item.criticismID,item.userName,item.userID,index)"
                                        @longpress.stop="longTapSelect" @longTap.stop="longTapSelect">
                                        <image :src="item2.userIcon" v-if="item2.userIcon" class="comments-face">
                                        </image>
                                        <u-avatar v-else :text="truncateCharacter(item2.userName)" size="30"></u-avatar>
                                        <view class="comments-body">
                                            <view class="comments-header">
                                                <text class="comments-header-text">{{item2.userName}}</text>
                                                <text class="comments-header-text" v-if="item2.isAuthor==0"
                                                    style="background-color: #316AB9;color: #FFFFFF;margin-left: 8rpx;padding: 2rpx 5rpx 2rpx 5rpx;border-radius: 3rpx;">作者</text>
                                                <template v-if="item2.replyUserName">
                                                    <image class="comments-header-image"
                                                        :src="require('@/static/icons/right-arrow.png')"
                                                        mode="widthFix" />
                                                    <text class="comments-header-text">{{item2.replyUserName}}</text>
                                                </template>
                                            </view>
                                            <view class="comments-content">
                                                <text
                                                    class="comments-content-text flex flex-direction">{{item2.content}}</text>
                                            </view>
                                            <view class="comments-info">
                                                <text
                                                    class="grey">{{dateFormat(item2.createTime,item2.isWaterArmy==0)}}</text>
                                                <text class="comments-replay-btn">回复</text>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                <view class="comments-more-container " v-if="item.childrenCriticismList.length>0"
                                    :name="`loadingState${index}`" :ref="`loadingState${index}`">
                                    <view class="comments-more">
                                        <view class="comments-more-tips" @tap="showMore(index)"
                                            v-if="item.loadingState=='loadmore'">
                                            <text class="comments-more-text">—</text>
                                            <text
                                                class="comments-more-text">展开{{item.childrenCriticismList.length}}条回复</text>
                                            <image class="comments-more-image" mode="aspectFill"
                                                :src="require('@/static/icons/down-arrow.png')">
                                            </image>
                                        </view>

                                        <view class="comments-more-tips" v-if="item.loadingState=='expandMore'">
                                            <view class="comments-more-tips" @tap="showExpandMore(index)">
                                                <text class="comments-more-text">—</text>
                                                <text class="comments-more-text">{{"展开更多"}}</text>
                                                <image class="comments-more-image" mode="aspectFill"
                                                    :src="require('@/static/icons/down-arrow.png')">
                                                </image>
                                            </view>
                                            <view class="comments-more-tips" @tap="noMore(index)"
                                                style="margin-left: 30rpx;">
                                                <text class="comments-more-text">—</text>
                                                <text class="comments-more-text">{{"收起"}}</text>
                                                <image class="comments-more-image" mode="widthFix"
                                                    :src="require('@/static/icons/up-arrow.png')">
                                                </image>
                                            </view>

                                        </view>
                                        <view v-if="item.loadingState=='nomore'" class="comments-more-tips"
                                            @tap="noMore(index)">
                                            <text class="comments-more-text">{{"收起"}}</text>
                                            <image class="comments-more-image" mode="widthFix"
                                                :src="require('@/static/icons/up-arrow.png')"></image>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </cell>
                    </list>
                </view>
            </view>
            <!-- <swiper class="list-wrapper" :current="tabsCurrent" @change="swiperChange">
                <swiper-item>

                </swiper-item>
                <swiper-item>
                    <view class="comment-content">追踪</view>
                </swiper-item>
            </swiper> -->
        </view>
        <view class="comments-card-popup" v-if="showShade" @tap="hidePop">
            <view class="pop" :style="popStyle" :class="{'show':showPop}">
                <text class="pop-text" @tap.stop="delComment">删除</text>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        mapGetters
    } from "vuex"
    import i18n from "@/lang";
    import {
        forEach
    } from "lodash";
    export default {
        name: "CommentCard",
        data() {
            return {
                postsId: "",
                tabsCurrent: 0,
                replyList: {},
                loadingState: 'loadmore', //加载前值为loadmore,没有数据为nomore
                commentContents: [],
                moreData: {},
                showShade: false,
                popStyle: "",
                winSize: "",
                delCommentData: {},
                pageIndex: 1,
                pageSize: 10
            };
        },
        props: {
            newsId: {
                type: String,
                default: ""
            },
            replyRefresh: {
                type: String,
                default: "",
            }
        },
        computed: {
            tabList() {
                return [{
                    name: "评论"
                }]
            },
            ...mapGetters(['columnID', 'userID']),
            i18n() {
                return i18n.t('columnAutoRefresh')
            }
        },
        watch: {
            newsId: {
                immediate: true,
                handler(newVal, oldVal) {
                    this.postsId = newVal;
                    this.GetCriticism();
                },
            },
            replyRefresh: {
                immediate: true,
                handler(newVal, oldVal) {
                    if (newVal == "") {
                        return
                    }
                    this.GetCriticism();
                },
            }
        },
        methods: {
            swiperChange(e) {
                this.tabsCurrent = e.detail.current;
            },
            tabsChangeHandler(item) {
                this.tabsCurrent = item.index
            },
            replay(criticismID, replayName, replyUserID, index) {
                this.$emit("replay", {
                    criticismID,
                    replayName,
                    replyUserID,
                    index
                })
            },
            showMore(index) {
                // debugger;
                // this.$refs[`loadingState${index}`]
                this.handlingComment(index);
            },
            /**收起评论**/
            noMore(index) {
                this.$set(this.replyList, index, {});
                Reflect.deleteProperty(this.replyList, index);
                this.commentContents[index].loadingState = "loadmore"; //展开回复
                return;
            },
            /*展开更多评论*/
            showExpandMore(index) {
                this.handlingComment(index);
            },
            handlingComment(index) {
                if (!this.replyList[index]) {
                    let temp = this.tempChunk(this.commentContents[index].childrenCriticismList, 3, 0);
                    this.$set(this.replyList, index, temp[0]);
                    if (temp.length === 1) {
                        this.commentContents[index].loadingState = "nomore"; //收起
                        return;
                    }
                    this.commentContents[index].loadingState = "expandMore"; //展开更多回复
                } else {
                    let temp1 = this.tempChunk(this.commentContents[index].childrenCriticismList, 10, this.replyList[index]
                        .length);
                    this.replyList[index] = this.replyList[index].concat(temp1[0]);
                    if (temp1.length === 1) {
                        this.commentContents[index].loadingState = "nomore"; //收起
                        return;
                    }

                }
            },
            GetCriticism() {
                let that = this;
                if (this.postsId == "") {
                    return
                }
                //加载评论回数据
            },
            GetCriticismReply(criticismID, index) {
                let that = this;
                //二级评论时触发刷新评论数据
            },
            dateFormat(time, type) {
                let date = new Date(time);
                let year = date.getFullYear();
                // 在日期格式中,月份是从0开始的,因此要加0,使用三元表达式在小于10的前面加0,以达到格式统一  如 09:11:05
                let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                // 拼接
                if (type) {
                    return hours + ":" + minutes;
                }
                return seconds == '00' ? hours + ":" + minutes : hours + ":" + minutes + ":" + seconds;
            },
            truncateCharacter(item) {
                if (item) {
                    return item.slice(0, 1)
                }
                return "";
            },
            /*
            arr 数组集合  num 一个数组多少条数据  index 下标
            **/
            tempChunk(arr, num, index) {
                let j = index,
                    o = j;
                let newArray = [];
                while (j < arr.length) {
                    j += num;
                    newArray.push(arr.slice(o, j));
                    o = j;
                }
                return newArray;

            },
            longTapSelect(e) {
                let that = this;
                let [touches, style] = [e.touches[0], ""];
                /* 因 非H5端不兼容 style 属性绑定 Object ,所以拼接字符 */
                if (touches.screenY > (this.winSize.height / 2)) {
                    style = `bottom:${this.winSize.height-touches.screenY}px;`;
                } else {
                    style = `top:${touches.screenY}px;`;
                }
                if (touches.screenX > (this.winSize.witdh / 2)) {
                    style += `right:${this.winSize.witdh-touches.screenX}px;`;
                } else {
                    style += `left:${touches.screenX}px;`;
                }

                this.popStyle = style;
                that.showShade = true;
                that.delCommentData = e.target.dataset;
                console.log("长按删除", JSON.stringify(e.target.dataset))
            },
            hidePop() {
                setTimeout(() => {
                    this.showShade = false;
                    this.delCommentData = {};
                }, 250);
            },
            /* 获取窗口尺寸 */
            getWindowSize() {
                uni.getSystemInfo({
                    success: (res) => {
                        this.winSize = {
                            "witdh": res.windowWidth,
                            "height": res.windowHeight
                        }
                    }
                })
            },
            delComment() {
                let that = this;
                //删除评论
            }
        },
        mounted() {
            this.getWindowSize();
        },

    }
</script>

<style lang="scss" scoped>
    // .comments-card {
    //     margin-bottom: 100rpx;
    // }

    .comments-card-popup {
        position: fixed;
        z-index: 100;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(125, 125, 125, 0.3);
        -webkit-touch-callout: none;

        .pop {
            position: fixed;
            z-index: 101;
            width: 180rpx;
            box-sizing: border-box;
            font-size: 28rpx;
            text-align: left;
            color: #333;
            background-color: #FFFFFF;

            .pop-text {
                font-size: 30rpx;
                color: #333333;
                padding: 20rpx 20rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                user-select: none;
                -webkit-touch-callout: none;

                &:active {
                    background-color: rgba(195, 193, 193, 0.1);
                }
            }
        }
    }

    .header {
        overflow: hidden;
        padding-bottom: 20rpx;


        .tabs-wrapper {
            background-color: transparent;
            // padding-bottom: 0rpx;
            // margin-bottom: 0rpx;

        }

        border-bottom: 2rpx solid #EEEEEE;
    }

    .list-wrapper {
        display: flex;
        // background-color: red;
        padding: 0;
        margin: 0;

    }

    .comment-content {
        display: flex;
        // padding-top: 20rpx;

        .total-comments {
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: center;
            overflow: hidden;
            margin-top: 30rpx;

            &-text {
                font-size: 36rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #2E2D2D;
                line-height: 37rpx;
            }
        }
    }


    .comments {
        display: flex;

        .comments-items {
            display: flex;
            flex-direction: row;
            margin-bottom: 32rpx;

            .comments-face {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
            }

            .comments-body {
                flex: 1;
                padding-left: 16rpx;

                .top-comments {
                    display: flex;
                    flex-direction: row;

                    .top-comments-info {
                        margin-left: 20rpx;
                    }

                    &:active {
                        background-color: rgba(195, 193, 193, 0.1);
                    }
                }

                .comments-header {
                    margin-top: 8rpx;
                    margin-bottom: 8rpx;
                    display: flex;
                    flex-direction: row;

                    &-text {
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #BDBDBD;
                    }
                }

                .comments-content {
                    &-text {
                        font-size: 28rpx;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #2E2D2D;
                        line-height: 37rpx;
                    }
                }

                .comments-info {
                    margin-top: 8rpx;
                    display: flex;
                    flex-direction: row;

                    .comments-replay-btn {
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #6D6D6D;
                        padding-left: 20rpx;
                    }
                }

                .comments-more-container {
                    display: flex;
                    flex-direction: column;
                    margin-right: 10rpx;
                    // background-color: #2E2D2D;
                    height: 80rpx;
                    margin-left: 80rpx;

                    .comments-more {
                        display: flex;
                        flex-direction: row;
                        color: #999999;
                        align-items: center;
                        align-content: center;
                        justify-content: flex-start;
                        padding-top: 5rpx;

                        .comments-more-text {
                            font-size: 28rpx;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #B4B4B4;
                        }

                        .comments-more-image {
                            width: 25rpx;
                            height: 25rpx;
                            margin-left: 8rpx;
                        }

                        .comments-more-icon {
                            margin-left: 8rpx;
                        }
                    }

                }

            }

        }
    }




    .comments-reply {
        display: flex;
        margin-top: 8rpx;
        margin-left: 80rpx;

        .comments-items {
            margin-bottom: 0rpx;
            flex: 1;
            flex-direction: row;

            .comments-face {
                width: 70rpx;
                height: 70rpx;
            }

            .comments-body {
                .comments-header {
                    font-size: 26rpx;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    align-content: center;
                    justify-content: flex-start;

                    .comments-header-image {
                        width: 15rpx;
                        height: 15rpx;
                    }
                }


                .comments-content {
                    display: flex;
                    flex: 1;
                    flex-wrap: wrap;
                    width: 457rpx;

                    .comments-content-text {
                        flex: 1;
                        font-size: 28rpx;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #2E2D2D;

                        white-space: pre-wrap;
                        word-wrap: break-word;
                    }
                }
            }

        }
    }

    .comments-more-tips {
        display: flex;
        flex-direction: row;
        align-items: center;
        align-content: center;
        justify-content: flex-start;
    }

    .grey {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #B4B4B4;
    }
</style>
使用方法 ——在父组件中分别引入
            <view class="bottom-content">
                <ColumnCard :logo="columnLogo" :counter="cardCounter" :columnName="column.name" :intro="column.intro"
                    :isSubscribe="personal.isSubscribeColumn" @follow="follow" @toColumnDetail="toColumnDetail"
                    :id="column.id" />
            </view>
            <u-gap height="5" bgColor="#EEEEEE"></u-gap>

            <view class="bottom-content" style="padding-top: 5rpx;">
                <CommentCard :newsId="newsID" v-on:replay="replay" ref="commentListRef" />
            </view>
父组件加入下面几个方法
replay(data) {
                this.replayData = data;
                this.$refs.commentTextareaRef.isMaskContentStyle = false;
            },
            /*
             * 刷新回复评论列表
             */
            replyRefreshList(data) {
                this.$refs.commentTextareaRef.isMaskContentStyle = true;
                this.$refs.commentListRef.GetCriticismReply(data.criticismID, data.index);
            },
            /*
             * 刷新评论列表
             */
            commentRefreshList() {
                this.$refs.commentTextareaRef.isMaskContentStyle = true;
                this.$refs.commentListRef.GetCriticism();
            },
            pullUpLoading() {
                console.log("上拉加载");
                this.$refs.commentListRef.pageIndex = this.$refs.commentListRef.pageIndex + 1;
                this.$refs.commentListRef.GetCriticism();
            }

效果图:


本文作者:admin

本文链接:https://www.javalc.com/post/102.html

版权声明:本篇文章于2022-09-28,由admin发表,转载请注明出处:分享你我。如有疑问,请联系我们

C# 使用NAudio实现录音并过滤大部分无用的杂音并使用python 识别录音内容

发表评论

取消
扫码支持