5***@qq.com
5***@qq.com
  • 发布:2022-01-06 09:39
  • 更新:2022-01-06 10:18
  • 阅读:608

如何在unicloud-db中实现视图更新?

分类:uniCloud

1、数据更新问题:unicloud-db 点赞后,有什么办法重新请求数据?
我用来this.$refs.udb.refresh() 和 this.$refs.udb.reset()都觉得不对劲啊|

2022-01-06 09:39 负责人:无 分享
已邀请:
DCloud_uniAD_HDX

DCloud_uniAD_HDX

调用 this.$refs.udb.refresh() 后会刷新数据,请提供一个简单的测试工程

5***@qq.com

5***@qq.com (作者)

有么有比较优雅的更新方式呢?

  • 如果是通过refresh,原来都数据没有了
  • 通过reset 则没反应

比如点赞/评论,实际上是要重新请求数据的,否则不能同步最新数据(如:几百个人同时点赞)
我知道如果通过云函数,是可以自由地调用了。

<template>  
    <view>  

        <!-- 头部 -->  
        <view class="header">  
            <view class="grid">  
                <view v-for="(item,idx) in gridData" class="item">  
                    <uni-icons type="contact"></uni-icons>  
                    <text>{{item.text}}</text>  
                </view>  
            </view>  
        </view>  

        <!-- 列表 -->  
        <view class="list-tab">  
            <text :class="[{active:tabIndex==0}]">推荐</text>  
            <text>关注</text>  
            <text>精华</text>  
            <text>的你来答</text>  
        </view>  

        <unicloud-db ref="udb" orderby="create_date desc" v-slot:default="{data, pagination, loading, hasMore, error}"  
            collection="content,content-commonts,content-like,uni-id-users"  
            field="user_id{avatar_file,nickname},content,excerpt,create_date,_id as content_id">  
            <view v-if="error">{{error.message}}</view>  
            <view v-else-if="data">  
                <view class="list">  
                    <view class="item" v-for="(item,idx) in data" :key="idx">  
                        <view class="top">  
                            <view class="inner">  
                                <!--            <image :src="item.user_id[0].avatar_file.url+item.user_id[0].avatar_file.extname"  
                                    ></image> -->  
                                <image src="../../static/logo.png" mode=""></image>  
                                <view class="txt">  
                                    <view>{{item.user_id[0].nickname}}</view>  
                                    <text>  
                                        <uni-dateformat :threshold="[60000,item.create_date]"  
                                            :date="item.create_date" />  
                                    </text>  
                                </view>  
                            </view>  
                            <uni-tag text="精华" type="primary"></uni-tag>  
                        </view>  
                        <view class="content" v-html="item.content">  
                        </view>  
                        <view class="c-tool">  
                            <view @click="like(item)">  
                                <uni-icons size="24" type="hand-up"></uni-icons>  
                                <text>{{item['content_id']['content-like'].length==0?'':item['content_id']['content-like'].length}}</text>  
                            </view>  
                            <view @click="open(item)">  
                                <uni-icons size="24" type="chatbubble"></uni-icons>  
                                <text>{{item['content_id']['content-commonts'].length}}</text>  
                            </view>  
                            <view>  
                                <uni-icons size="24" type="redo"></uni-icons>  
                            </view>  
                        </view>  
                        <view class="c-list">  
                            <view class="t-list" v-for="(el,idx) in item['content_id']['content-like']">  
                                <text>王明</text>  
                                <text>等人觉得很赞</text>  
                            </view>  
                        </view>  
                        <view class="r-list">  
                            <view class="item" v-for="(item2,index) in item['content_id']['content-commonts']">  
                                <view><text>无双:</text><text v-html="item2.comment_content"></text></view>  
                                <!-- <view><text>小王</text><text class="hf">回复</text><text>matchless</text>我来评论一下</view> -->  
                            </view>  
                        </view>  
                    </view>  
                </view>  
            </view>  
            <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>  
        </unicloud-db>  
        <uni-popup class="uni-popup" ref="popup" type="top" background-color="#fff">  
            <view class="txt">  
                <view>评论match</view>  
                <button size="mini" type="primary" @click="send">send</button>  
            </view>  
            <editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar showImgResize  
                @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady"></editor>  
        </uni-popup>  
        <uni-fab @fabClick="fabClick" :horizontal="horizontal" :vertical="vertical"></uni-fab>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                selectItem: {},  
                visible: true,  
                readOnly: false,  
                loadMore: {  
                    contentdown: '',  
                    contentrefresh: '',  
                    contentnomore: ''  
                },  
                tabIndex: 0,  
                gridData: [{  
                    icon: '',  
                    text: '热榜'  
                }, {  
                    icon: '',  
                    text: '自测'  
                }, {  
                    icon: '',  
                    text: '找公司'  
                }, {  
                    icon: '',  
                    text: '求职锦囊'  
                }],  
                horizontal: 'right',  
                vertical: 'bottom',  
            }  
        },  
        onPullDownRefresh() {  
            this.$refs.udb.loadData({  
                clear: true  
            }, () => {  
                uni.stopPullDownRefresh()  
            })  
        },  
        onReachBottom() {  
            this.$refs.udb.loadMore()  
        },  
        methods: {  
            like(item) {  
                console.log(item)  
                let user = uni.getStorageSync('userInfo')  
                let _index = (item.content_id['content-like']).find(el => el.user_id == user._id)  
                let action = ''  
                let _id = ''  
                if(_index==undefined){  
                    action = 'add'  
                }else{  
                    action = 'del'  
                    _id = _index._id  
                }  

                uniCloud.callFunction({  
                    name: 'content-like',  
                    data: {  
                        action,  
                        user_id: user._id,  
                        content_id: item._id._value,  
                        like_status: true,  
                        like_time: new Date().getTime(),  
                        _id  
                    },  
                    success: (res) => {  
                        this.$refs.udb.refresh()  
                    }  
                })  

            },  
            send(item) {  
                let user = uni.getStorageSync('userInfo')  
                this.editorCtx.getContents({  
                    success: (res) => {  
                        if(res.text=='\n')return  
                        uniCloud.callFunction({  
                            name: 'content-commont',  
                            data: {  
                                comment_content: res.html,  
                                action: 'create',  
                                user,  
                                content_id: this.selectItem._id._value,  
                                user_id: user._id,  
                                comment_type: 0,  
                                reply_user_id: this.selectItem.user_id[0]._id,  
                                user_nickname: this.selectItem.user_id[0].nickname,  
                                reply_comment_id: '',  
                                comment_date: user.comment_date,  

                            },  
                            success: () => {  
                                this.$refs.udb.refresh()  
                            }  
                        })  
                    }  
                })  
            },  
            readOnlyChange() {  
                this.readOnly = !this.readOnly;  
            },  
            onEditorReady() {  
                uni.createSelectorQuery()  
                    .select('#editor')  
                    .context(res => {  
                        this.editorCtx = res.context;  
                    })  
                    .exec();  
            },  
            onStatusChange(e) {  
                const formats = e.detail;  
                console.log(formats);  
                this.formats = formats;  
            },  

            open(item) {  
                // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']  
                this.$refs.popup.open('bottom')  
                this.selectItem = item  
            },  

            close() {  
                this.$refs.popup.close()  
                this.selectItem = {}  
            },  
            fabClick() {  
                uni.navigateTo({  
                    url: '/pages/home/editor'  
                })  
            }  
        }  
    }  
</script>  

<style scoped lang="scss">  
    .header {  
        background-color: #FFFFFF;  
        padding: 20rpx 0;  

    }  

    .grid {  
        display: grid;  
        grid-auto-flow: column;  

        .item {  
            display: flex;  
            justify-content: center;  
            flex-direction: column;  
            align-items: center;  
            font-size: 28rpx;  
        }  
    }  

    .list-tab {  
        background-color: #FFFFFF;  
        padding: 10rpx 20rpx;  
        margin-top: 20rpx;  

        text {  
            padding: 20rpx;  
            color: $black-color-3;  
            font-size: 24rpx;  

            &.active {  
                color: $black-color-1;  
                font-size: 32rpx;  
            }  
        }  
    }  

    .list {  
        background: #fff;  

        &>.item {  
            border-bottom: 1rpx solid $bg-grey;  
        }  

        .top {  
            display: flex;  
            align-items: center;  
            justify-content: space-between;  
            padding: 20rpx;  

            .inner {  
                align-items: center;  
                display: flex;  

                .txt {  
                    padding-left: 10rpx;  

                    view {  
                        color: $primary-color;  
                    }  

                    text {  
                        color: $black-color-4;  
                    }  
                }  
            }  
        }  

        image {  
            max-width: 60rpx;  
            max-height: 60rpx;  
        }  

        .content {  
            color: $black-color-2;  
            font-size: 28rpx;  
            padding: 0 20rpx;  
        }  

        .c-tool {  
            display: flex;  

            view {  
                flex: 1;  
                display: flex;  
                align-items: center;  

                &:nth-child(1) {  
                    .uni-icons {  
                        margin-left: 20rpx;  
                    }  
                }  

                &:nth-child(2) {  
                    display: flex;  
                    justify-content: center;  
                }  

                &:nth-last-child(1) {  
                    display: flex;  
                    justify-content: end;  

                    .uni-icons {  
                        padding-right: 20rpx;  
                    }  
                }  
            }  
        }  

        .c-list {  
            display: flex;  
            align-items: flex-start;  
            padding: 20rpx;  

            .t-list {  
                text {  
                    font-size: 24rpx;  
                    padding: 10rpx;  
                    color: $uni-color-primary;  
                }  
            }  
        }  

        .r-list {  
            font-size: 24rpx;  
            padding: 20rpx;  

            .item {  
                view {  
                    display: flex;  
                    margin: 5rpx 0;  
                    color: $black-color-2;  

                    text {  
                        color: $primary-color;  

                        &:nth-last-child(1) {  
                            color: $black-color-1;  
                        }  

                        &.hf {  
                            padding: 0 20rpx;  
                            color: $black-color-1;  
                        }  
                    }  
                }  
            }  
        }  
    }  

    .uni-popup {  

        .txt {  
            line-height: 50rpx;  
            padding: 20rpx;  
            border-bottom: 1rpx solid $bg-grey;  
            display: flex;  
            justify-content: space-between;  
            align-items: center;  

            uni-button {  
                margin: 0;  
            }  
        }  

        uni-editor {  
            padding: 20rpx 20rpx;  

        }  
    }  
</style>  
<style lang="scss">  
    page {  
        background: $bg-grey;  
    }  
</style>  

该问题目前已经被锁定, 无法添加新回复