最近在切前端页面,写一些前端特效,做一个下拉刷新的时候,下拉卡顿,加了一个 css 属性,

.recommend .swiper-wrapper{
    -webkit-overflow-scrolling: touch;//该属性随着手指离开还会保持滚动
}
还有就是做左右滑动的时候,css 现在已经有现在的了,设置如下属性就可以很好的到达想要的效果
overflow: scroll;
-webkit-overflow-scrolling: touch;//该属性随着手指离开还会保持滚动

vue的总结,首先 vue 有一个加载时间,如果不做处理,会造成vue代码未被解析前就加载出来,所以我这边结合jquery做了一个处理,首先将整个页面加上 display:none 的属性,等vue渲染结束后显示页面,如下

function removeLoading() {
    $('body').find('#load').remove();
    $('#body').show();
}

iframe 跨域的问题,使用 js 的postmessage来处理接受,代码如下

window.addEventListener('message',function(e){
    console.log('收到支付请求');
    console.log('数据' + e.data.data);
    $.ajax({
        type: "POST",
        url: "{$pay_url_html}",
        data: e.data.data,
        dataType:"html",
        success: function(data){
            $('#pay-html').empty().append(data);

        }
    });

})

js 的闭包以及方法调用,代码如下,外部直接调用闭包方法即可

var Pay = {
    "domains":"",
    "pay_html_url":"",
    "payHtml":function(config){
        var _this = this;
        var url = this.domains + this.pay_html_url + "?";
        for(var i in config){
            url += i +"="+config[i]+"&";
        }
        url = url.substring(0,url.length-1);
        console.log(url);
        //iframe中跨域通信
        post = {type:1,data:config};
        window.parent.postMessage(post,'*');
        
    },
};

 

Logo

前往低代码交流专区

更多推荐