zoukankan      html  css  js  c++  java
  • 怎么让点赞数实时更新渲染

    需求是这样的~

    详情页点赞后,列表页刷新,我们这里的接口是一个接口对应一个数据

     

      <div class="fishqc-foretell" ms-visible="excellenceReport">
                <div style="height: 15rem" id="excellentcontain">
                    <div ms-for="(key,el) in @excellenceReportLists" style="padding:1rem 0.5rem;padding: 0.5rem 0.5rem 0.5rem 0.5rem;height: 0rem;text-align: center;" ms-class="[@excellenceReportLists.length=='1'?'make-it-large':'make-it-small']">
                        <a ms-click="jumpToreport(el)" style="display: inline-block;border:1px solid #dfdfdf; 100%;height: 14rem;padding: 1rem 0.3rem 0 0;position: relative;float: left;">
                            <div class="fishqc-myreport" style="position: relative;padding-left: 1rem;box-sizing: border-box;float: left;100%;">
                                <img src="/img/jingpin.jpg" alt="" style="display: block;top:-1rem;left:0rem;position: absolute; 2.5rem;position: absolute;" ms-visible="el.excellence=='1'">
                                <span style="float: left;position: relative;">
                                  <img ms-attr="{src:el.avatar}"  alt="" class="fishqc-myreport-img" style="margin-right: 0.5rem;">
                                  <img src="/img/v.png" alt="" style=" 0.8rem;top: 1.35rem;position: absolute;left: 1.3rem;" ms-visible="el.verified=='1'">
                                  <span class="color-9">{{el.author}}</span>
                                </span>
                                <span class="fishqc-floatR fishqcfont">试后推荐度:
                                <p style="display: inline-block;">
                                <span ms-class="['fishqc-report-xing-small',el.score >=1 ?'fishqc-report-xing-active':'fishqc-report-xing' ]"></span>
                                <span ms-class="['fishqc-report-xing-small',el.score >=2 ?'fishqc-report-xing-active':'fishqc-report-xing' ]"></span>
                                <span ms-class="['fishqc-report-xing-small',el.score >=3 ?'fishqc-report-xing-active':'fishqc-report-xing' ]"></span>
                                <span ms-class="['fishqc-report-xing-small',el.score >=4 ?'fishqc-report-xing-active':'fishqc-report-xing' ]"></span>
                                <span ms-class="['fishqc-report-xing-small',el.score >=5 ?'fishqc-report-xing-active':'fishqc-report-xing' ]"></span>
                                </p>
                                </span>
                            </div>
                            <p class="fishqc-myreporttitles" style="padding-left: 1rem;text-align: left;padding-top: .5rem;">{{el.title}}</p>
                            <div class="fishqc-myreportbox" style="margin-left: 1rem;">
                                <div class="fishqc-myreportboxImg" ms-css="{backgroundImage: 'url('+el.prdImg + ')'}">
                                    <i class="fishqc-greenfish" style=" 2rem;height: 2rem;right: -.5rem;"></i>
                                </div>
                                <div style="display: inline-block;60%;float:right;">
                                    <p class="reportproductname" style="overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{el.name?el.name:el.prdName}}</p>
                                    <p class="fishqcTry-img-status fishqc-textLeft" style="margin-top: .5rem;"><span ms-visible="el.hasimg">有晒图</span><span ms-visible="el.excellence=='1'">精品报告</span></p>
                                </div>
                            </div>
                            <div class="fishqc-myreportcoin" style="margin-left: 1rem;">
                                <span class="fishqc-floatL">{{el.ctime}}</span><span class="fishqc-floatR">
                                <p class="fishqc-report-ping"><span class="fishqc-report-praise"><img src="/img/fishqc-praise.png" alt=""><span class="fishqc-vertical">{{el.praise}}</span></span><span class="fishqc-report-collect"><img src="/img/fishqc-collect.png" alt=""><span>{{el.favNum}}</span></span>
                                </p>
                                </span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
      excellenceReportList: function() {
                $.get('/excellenceReportList', {
                    lang: 'chs',
                    page: 1,
                    limit: 10
                }, function(res) {
                    if (res.code == '200') {
    
                        if (res.data.tryInfo.length == '1') {
                            $('#excellentcontain').css({
                                 '100%'
                            })
                        } else {
                            $('#excellentcontain').css({
                                 (res.data.tryInfo.length * 19) + 'rem'
                            })
    
                        }
                        vmi.excellenceReportLists = res.data.tryInfo;
                        vmi.excellenceReportLists.forEach(function(val, index) {  
                            vmi.excellentId=val.id
                            // excellentId
                            vmi.gettimes(val)
                            if (val.score == '0') {
                                return vmi.tryReportStar;
                            } else {
                                vmi.tryReportStar.splice(0, val.score)
                                for (var i = 0; i < val.score; i++) {
                                    vmi.tryReportStar.unshift(true)
                                }
                            }
                        })
                    } else if (res.code == '204') {
                        //如果精选报告没有的话就隐藏
                        vmi.excellenceReport = false;
    
                    }
                })
            },
      //让点赞数实时更新,精品
             gettimes: function(el) {
                $.ajaxSetup({
                    crossDomain: true,
                    xhrFields: {
                        withCredentials: true
                    }
                });
                $.get("https://stat.fishqc.com/stat", { 
                    'id': el.id,
                    't': 'try_report'
                }, function(res) {     
                    if (res.code == "200") {
                       vmi.newlike=res.data.like
                       el.praise=vmi.newlike
                        
                    }
                }).fail(function() {});
             },
  • 相关阅读:
    Python中字符的练习
    Python中的数据结构 --- 集合(set)
    Python中的数据结构 --- 元组(tuple)、字典(tuple)
    Python中的数据结构 --- 列表(list)
    Python变量、字符练习1
    Python中字符串的操作
    Python中for、while、break、continue、if的使用
    Python中的变量
    Python中注释的添加
    Python的介绍及Pycharm软件的安装
  • 原文地址:https://www.cnblogs.com/antyhouse/p/8921324.html
Copyright © 2011-2022 走看看