<ul> <li class="new-list" v-for="item in proarr"> <a :href="'/index.php/new/news?id='+item.id" class="new-item"> <div class="new-title ell">{{item.title}}</div> <div class="new-content"> <div class="new-cover" v-bind:style="{backgroundImage: 'url('+item.purl+')'}"></div> <div class="new-desc">{{item.introduction}}</div> </div> <div class="new-date">{{item.create_date}}</div> </a> </li> </ul> <div id="ajaxloading" v-show="showLoading" class="ac line-scale-pulse-out-rapid"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <p class="errormsg ac orange pd20">{{errmsg}}</p>
new Vue({ el: '#app', data() { return { proarr: [], showLoading: false, p:1, errmsg:'' }; }, components: { }, created() { this.getProList();
//監聽滾動 window.addEventListener('scroll', this.handleScroll); }, methods: { handleScroll() {
//判斷滾動到底部 if ($(window).scrollTop() >=$(document).height() - $(window).height()) { this.showLoading = true; this.p++; this.getProList(this.p); } }, getProList() { var that = this; $.post('url',{p:this.p},function(datas){ var state = datas.sign; that.showLoading = false; if (state === ERROK) { var data = datas.data.data; for (var i = 0; i < data.length; i++) { that.proarr.push(data[i]); } that.errmsg=''; } else { that.errmsg='暫無更多數據'; } },'json'); } } })
開始碰到個坑。請求到的數據我直接push到循環數組中,結果整個數組變成一個元素,后來想了想用循環把每一條數據分別push才解決這個問題