一个不懂前端的php不是一个好民工。
这几年一直以为在php程序猿中我js(jquery)是不错的。写交互、特效都可以搞定。这就面临一个问题，技术评级时候我该按前端去评还是后端去评。好啦。闲话不多说了。
为什么要选择vue去学习，返回json数据然后去循环就可以了，不需要像jquery那样在js中去拼接html。当然如果你想兼容ie8以下的浏览器，jquery还是很好的选择。
<header class="header">
<span class="pt15"><img class="logo" src="<?php echo Yii::app()->request->baseUrl . IMGAGES_URL ?>/mobile/logo.png"></span>
<span class="changearea">
<a href="<?php echo $this->createUrl('mobileactivity/city'); ?>" class="city">{{ city.name }}</a>
</span>
<span class=""><img class="citylogo" v-bind:src='city.logo'></span>
</header>
<div class="listimgtext">
<ul class="ulimgtext" id='ulimgtext' >
<li class="liimgtext" v-for="item in list.list">
<div class="left wb30"><a class="listimg" href="/index.php?r=mobileactivity/detail&id={{item.id}}"><img v-bind:src="item.image"></a></div>
<div class="right wb60">
<p><a class="listtitle" href="/index.php?r=mobileactivity/detail&id={{item.id}}">{{item.title}}</a></p>
<span class="listdate">活动时间：{{item.starttime}} ~ {{item.endtime}}</span>
<p class="listdate">地点：{{item.city}}</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<input type="hidden" class="liimgtextval" value="{{list.count}}">
<input type="hidden" class="citydata" id="citydata" value="{{ city.id }}" dataid="{{ city.id }}" dataname="{{ city.name }}">html部分，这里重点说下<img>部分，直接src={{city.logo}}在谷歌浏览器console中是报错的，需要绑定 v-bind:src='city.logo'这样才好
再说下li标签，看到v-for了吗，就是在这里循环的，熟悉smarty，或者thinkphp的小伙伴们看着语法是不是很熟悉
var pageData = {
i: 1,
height: 0,
over: false
}
//if (!city) {
var vm = new Vue({
el: 'html',
data: {
city: {
id: '',
name: '',
logo: ''
},
list: {
list: {},
count: ''
}
},
// 页面加载的时候会自动执行ready
ready: function () {
var city_id = getQueryString('city');
if (!city_id) { //获取当前城市
this.$http.get(cityListUrl).then(function (response) {
for (item in response.data.positioning) {
this.city.id = item;
this.city.name = response.data.positioning[item];
} //获取当前城市的logo
this.$http.get(currenCity + this.city.id).then(function (response) {
this.city.logo = response.data.info.image;
})
var page = getQueryString('page');
var page = page ? page : 0;
this.$http.get(listUrl + "&city=" + this.city.id + "&page=" + pageData.i).then(function (response) {
this.list.list = response.data.info.data;
this.list.count = response.data.info.count;
})
var stop = true;
var p = 0, t = 0;
window.onscroll = function () {
p = getScrollTop();
if (t <= p) {//下滚
hideFooter();
if (getScrollHeight() - (getScrollTop() + getClientHeight()) <= 10) {
if (stop == true) {
stop = false;
if (pageData.over) {
return false;
}
//
stop = true;
//load();
addLoading('ulimgtext');
pageData.i++;
vm.$http.get(listUrl + "&city=" + vm.city.id + "&page=" + pageData.i).then(function (response) {
removeLoading();
if (response.data.info.data.length == 0) {
pageData.over = true;
//loadingToOver();
} else {
vm.list.list = vm.list.list.concat(response.data.info.data);
}
})
//
}
}
} else {
//$(".ulimgtext").css("padding-bottom","60px");
showFooter();
}
setTimeout(function () {
t = p;
}, 0);
};
})
} else {
//return false;
//var city = getQueryString('city');
var city_id = city_id ? city_id : 999999;
if (city_id == 0) {
this.city.name = "全国";
}
this.$http.get(currenCity + city_id).then(function (response) {
this.city.logo = response.data.info.image;
this.city.name = response.data.info.name;
})
//根据city获取城市名称和图标。暂时缺接口
var page = getQueryString('page');
var page = page ? page : 0;
this.$http.get(listUrl + "&city=" + city_id + "&page=" + pageData.i).then(function (response) {
this.list.list = response.data.info.data;
this.list.count = response.data.info.count;
})
var stop = true;
var p = 0, t = 0;
window.onscroll = function () {
p = getScrollTop();
if (t <= p) {//下滚
hideFooter();
if (getScrollHeight() - (getScrollTop() + getClientHeight()) <= 10) {
if (stop == true) {
stop = false;
if (pageData.over) {
return false;
}
//
stop = true;
//load();
addLoading('ulimgtext');
pageData.i++;
vm.$http.get(listUrl + "&city=" + city_id + "&page=" + pageData.i).then(function (response) {
removeLoading();
if (response.data.info.data.length == 0) {
pageData.over = true;
//loadingToOver();
} else {
vm.list.list = vm.list.list.concat(response.data.info.data);
}
})
//
}
}
} else {
//$(".ulimgtext").css("padding-bottom","60px");
showFooter();
}
setTimeout(function () {
t = p;
}, 0);
};
}
}
});小弟也刚刚学习，希望大佬们多多指点