javascript - vue开发项目,创建出来的html,页面或许不到元素,
迷茫
迷茫 2017-04-11 11:16:20
0
5
343

在loadImage中获取不到dataUrl,因为ajax请求和这个方法同时进行的造成页面获取不到元素,所以加了定时器,但是如果ajax的请求时间超过了定时器的时间还是获取不到元素,所以有没有更好的办法来解决
$(function(){

var Myapp=new Vue({ el:'#myapp', data:{ apiBaseUrl:"https://api.starmakerstudios.com/api/v17/", songList:[], contain:{}, scrollTop:'', dataIamge:[] }, ready: function () { this.loadImage(); this.lazyImage(); }, methods:{ getParam: function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }, loadImage:function(){ var ts=$(this); setTimeout(function(){ var dataUrl = $('[data-url]'); var scrollTop = $(window).scrollTop(); var clientBottom = $(window).height() + scrollTop; dataUrl.each(function (v, i) { if ($(this).offset().top < clientBottom + 50) { var _Url = $(this).attr('data-url'); $(this).attr('src',_Url) } }) },500) }, lazyImage:function () { var headerHeight=$('.header').height(); var ts=this; $(window).on('scroll',function(){ ts.loadImage(); ts.scrollTop=$(window).scrollTop(); if(ts.scrollTop>headerHeight){ $('.header-i').show(); setTimeout(function(){ $('.header-i').css({ 'transform':'translate3d(0,0,0)', '-webkit-transform':'-webkit-translate3d(0,0,0)', '-moz-transform':'-moz-translate3d(0,0,0)', '-o-transform':'-o-translate3d(0,0,0)' }) },10) }else{ $('.header-i').hide(); setTimeout(function(){ $('.header-i').css({ 'transform':'translate3d(0,-65px,0)', '-webkit-transform':'-webkit-translate3d(0,-65px,0)', '-moz-transform':'-moz-translate3d(0,-65px,0)', '-o-transform':'-o-translate3d(0,-65px,0)', }) },30) } }) // $(window).scroll(function(){ // // }) }, shareFacebook:function(){ var ts = this; var text="Amazing charity activity on #StarMaker, Sing to donate money to a children's charity. Join me to share the love! #Sing #Karaoke #Music #Singer"; var baseUrl=location.origin; var url=baseUrl+"/stmaker_songlist/promotion/"+this.promotion_id+"/"+ts.getParam('device').replace(/[,|_]/g, '_')+"/share_type=fb"; var img = 'https://d2odow79s717pv.cloudfront.net/production/promotion/cover/13_share.jpg'; location.href = 'sm://facebook/?text=' + encodeURIComponent(text) + "&url=" + encodeURIComponent(url)+'&img=' + encodeURIComponent(img); }, goSing:function(params){ var locationUrl=window.location.href; var url=''; if(locationUrl.indexOf('fb')>0){//如果是facebook打开则是facebook $('.singlist').attr('data-gaid','facebookSongList'); url="https://m-link.starmakerstudios.com/songdetail/?songId="+params.id; }else{ if(event.target.className=="singer"){ $('.singer').attr('data-gaid','activitySing'); var songs=JSON.stringify(params); url="sm://recordsong/?song="+encodeURIComponent(songs)+"&promotion_id="+this.promotion_id; }else{ $('.singlist').attr('data-gaid','activitySongList'); url="sm://songdetail/?songId="+params.id+"&songTitle="+params.title+"&promotion_id="+this.promotion_id; } } window.location.href=url; } }, created:function(){ var ts=this; var dev = this.getParam('device').replace(/[,|_]/g, '/') || ''; this.promotion_id=this.getParam('promotion_id'); var url = this.apiBaseUrl + dev + '/promotions/' + this.promotion_id + '/songs'; this.$http.get(url).then(function (response) { var data=JSON.parse(response.data); this.songList=data[1].song_list; this.contain=data[0]; }) } })

});

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

reply all (5)
黄舟

vue获取就用vue的方法,就不要vue和jquery混着用了吧

    洪涛

    楼上说的有道理,你也可以试试回调。

      黄舟

      this.$nextTick(() => {

      this.loadImage(); this.lazyImage();

      })

      ready里这样写吧

        洪涛

        试一下生命周期钩子函数吧。
        https://vuejs.org.cn/api/#选项-生命周期钩子
        或者玩一下promise。

          PHPzhong

          把jquery删掉

            Latest Downloads
            More>
            Web Effects
            Website Source Code
            Website Materials
            Front End Template
            About us Disclaimer Sitemap
            php.cn:Public welfare online PHP training,Help PHP learners grow quickly!