Skip to content

V
vue-ssr-mobile
Commit 8e468514 authored by lixy's avatar lixy
Browse files
Options

营地、旅游列表分类

parent a0b1923b
Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 48 deletions
pages/activity.vue
View file @ 8e468514
......@@ -48,7 +48,7 @@
class="loading">加载中……</p>
<p
v-if="touchend"
class="empty_data">——共{{ totalCount }}个活动——</p>
class="empty_data">——共{{ totalCount?totalCount:0 }}个活动——</p>
<go-top/>
<Footer v-if="touchend"/>
</div>
......
pages/campsite.vue
View file @ 8e468514
......@@ -13,6 +13,18 @@
@next="next"
@change="changeBanner"
@click="bannerClick"/>
<div>
<nav
id="nav"
:class="searchBarFixed == true ? 'isFixed' :''">
<p
v-for="(item, index) in dataType"
:key="index"
:class="listQuery.type == item.id?'active':''"
@click="chooseSelect(item)">{{ item.name }}</p>
</nav>
</div>
<div style="padding-top: 0;border-top: 1px solid #dfdfdf;height: 17px;"/>
<ul
v-if="dataDetail.length"
id="scroll-area"
......@@ -37,9 +49,10 @@
<p
v-if="preventRepeatReuqest"
class="loading">加载中……</p>
<p id="empty"/>
<p
v-if="touchend"
class="empty_data">—— 共{{ totalCount }}个房车营地——</p>
class="empty_data">—— 共{{ totalCount?totalCount:0 }}个房车营地——</p>
<go-top/>
<Footer v-if="touchend"/>
</div>
......@@ -64,6 +77,7 @@
},
data(){
return{
searchBarFixed: false,
showBanner: !0,
looptime: 4000, // 循环时间
touchend: false,////没有更多数据
......@@ -105,38 +119,52 @@
},
methods: {
handleScroll: function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
// 设备/屏幕高度
let scrollObj = document.getElementById("scroll-area"); // 滚动区域
if(scrollObj) {
let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
//滚动条到底部的条件
console.log(scrollHeight - scrollTop);
if (document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight) {
if (this.touchend) {
return;
}
//防止重复请求
if (this.preventRepeatReuqest) {
return;
let path = $nuxt.$route.path;
if(path == '/campsite'){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let scrollObj = document.getElementById("scroll-area"); // 滚动区域
let menuTop = document.querySelector('#nav').offsetTop;
let empty = document.querySelector('#empty').offsetTop;
if (scrollTop > menuTop-44 && empty > scrollObj.clientHeight) {
this.searchBarFixed = true;
}
if (scrollTop < 80) {
this.active = 'activity';
this.searchBarFixed = false;
}
if(scrollObj) {
let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
//滚动条到底部的条件
console.log(scrollHeight - scrollTop);
if (document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight) {
if (this.touchend) {
return;
}
//防止重复请求
if (this.preventRepeatReuqest) {
return;
}
this.preventRepeatReuqest = true;
this.listQuery.pageNo = this.currentPage + 1;
this.getAll();
}
this.preventRepeatReuqest = true;
this.listQuery.pageNo = this.currentPage + 1;
this.getAll();
}
}
},
chooseSelect(e) {
console.log(e.target.value);
this.listQuery.tagId = e.target.value;
this.listQuery.type = e.id;
this.preventRepeatReuqest = true;
this.dataDetail = [];
this.listQuery.pageNo = 1;
document.documentElement.scrollTop = 0;
this.getAll();
},
getType() {
let t = this;
axios.get('/api/uccn/app/unauth/tour/tagList')
axios.get("/api/campsite/campsiteTag/app/unauth/tags")
.then(function(response) {
t.dataType = response.data;
t.dataType = response.data.data;
t.dataType.unshift({id:"",name:'全部'})
});
},
getAll() {
......@@ -173,6 +201,36 @@
<style lang="scss">
@import "../assets/styles/mixin";
.campsite-container{
nav{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: auto;
}
nav.isFixed{
position: fixed;
top: 44px;
background: #fff;
width: 100%;
border-bottom: 1px solid #dfdfdf;
}
nav::-webkit-scrollbar { width: 0 !important }
p{
text-align: center;
font-size: 14px;
color: #999;
flex-shrink: 0;
margin: 27px 13px 0px 13px;
padding-bottom: 13px;
}
p.active{
border-bottom: 2px solid #1bbb9f;
font-size: 16px;
color: #333;
}
.campsite-ul{
padding-top: 0px;
display: flex;
......
pages/news.vue
View file @ 8e468514
......@@ -42,7 +42,7 @@
class="loading">加载中……</p>
<p
v-if="touchend"
class="empty_data">——共{{ totalCount }}篇新闻资讯——</p>
class="empty_data">——共{{ totalCount?totalCount:0 }}篇新闻资讯——</p>
<go-top/>
<Footer v-if="touchend"/>
</div>
......
pages/tour.vue
View file @ 8e468514
......@@ -13,11 +13,23 @@
@next="next"
@change="changeBanner"
@click="bannerClick"/>
<div
id="nav"
:class="searchBarFixed == true ? 'isFixed' :''"
class="nav-sec-menu">
<nav>
<p
v-for="(item, index) in dataType"
:key="index"
:class="listQuery.tagId == item.id?'active':''"
@click="chooseSelect(item)">{{ item.name }}</p>
</nav>
</div>
<div style="padding-top: 0;margin-top: -17px;border-top: 1px solid #dfdfdf;height: 17px;"/>
<ul
v-if="dataDetail.length"
id="scroll-area"
type="1"
style="padding-top: 0;"
style="padding-top: 0;margin-top: -17px;"
class="main-padding">
<router-link
v-for="item in dataDetail"
......@@ -35,9 +47,10 @@
<p
v-if="preventRepeatReuqest"
class="loading">加载中……</p>
<p id="empty"/>
<p
v-if="touchend"
class="empty_data">——共{{ totalCount }}个旅行路线——</p>
class="empty_data">——共{{ totalCount?totalCount:0 }}个旅行路线——</p>
<go-top/>
<Footer v-if="touchend"/>
</div>
......@@ -83,6 +96,7 @@
dataNull:false,
tourList: [],
currentPage: 1,//当前加载页
searchBarFixed: false,
preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
};
},
......@@ -101,40 +115,72 @@
let cc = data.data;
return { bannerList: cc}
},
mounted(){
let t = this;
let galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop:true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
on: {
slideChangeTransitionEnd: function () {
console.log(this.activeIndex);
},
},
});
},
methods: {
handleScroll: function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
// 设备/屏幕高度
let scrollObj = document.getElementById("scroll-area"); // 滚动区域
if(scrollObj){
let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
//滚动条到底部的条件
if(document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight) {
if (this.touchend) {
return;
}
//防止重复请求
if (this.preventRepeatReuqest) {
return;
let path = $nuxt.$route.path;
if(path == '/tour') {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
// 设备/屏幕高度
let scrollObj = document.getElementById("scroll-area"); // 滚动区域
let menuTop = document.querySelector('#nav').offsetTop;
let empty = document.querySelector('#empty').offsetTop;
if (scrollTop > menuTop-44 && empty > scrollObj.clientHeight) {
this.searchBarFixed = true;
}
if (scrollTop < 80) {
this.active = 'activity';
this.searchBarFixed = false;
}
if (scrollObj) {
let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
//滚动条到底部的条件
if (document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight) {
if (this.touchend) {
return;
}
//防止重复请求
if (this.preventRepeatReuqest) {
return;
}
this.preventRepeatReuqest = true;
//数据的定位加20位
this.listQuery.page = this.currentPage + 1;
this.getAll();
}
this.preventRepeatReuqest = true;
//数据的定位加20位
this.listQuery.page = this.currentPage + 1;
this.getAll();
}
}
},
chooseSelect(e) {
console.log(e.target.value);
this.listQuery.tagId = e.target.value;
this.listQuery.tagId = e.id;
this.preventRepeatReuqest = true;
this.dataDetail = [];
this.listQuery.page = 1;
document.documentElement.scrollTop = 0;
this.getAll();
},
getType() {
let t = this;
axios.get('/api/uccn/app/unauth/tour/tagList')
.then(function(response) {
t.dataType = response.data;
t.dataType = response.data.data;
t.dataType.unshift({id:"",name:'全部'})
});
},
getAll() {
......@@ -172,6 +218,41 @@
<style lang="scss">
@import "../assets/styles/mixin";
.tour-container{
nav{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: auto;
}
nav::-webkit-scrollbar { width: 0 !important }
.nav-sec-menu.isFixed{
position: fixed;
top: 44px;
background: #fff;
height: 64px;
width: 100%;
border-bottom: 1px solid #dfdfdf;
}
p{
text-align: center;
font-size: 14px;
color: #999;
flex-shrink: 0;
margin: 27px 13px 0px 13px;
padding-bottom: 13px;
}
p.active{
border-bottom: 2px solid #1bbb9f;
font-size: 16px;
color: #333;
}
.tyle-list-li{
padding-right:10px;
display: inline-block;
}
.tour-item{
margin: 17px 0;
}
......
pages/vehicle.vue
View file @ 8e468514
......@@ -58,7 +58,7 @@
class="loading">加载中……</p>
<p
v-if="touchend"
class="empty_data">—— 共{{ totalCount }}款车型——</p>
class="empty_data">—— 共{{ totalCount?totalCount:0 }}款车型——</p>
<go-top/>
<Footer v-if="touchend"/>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment