邓平艺
4 years ago
4 changed files with 247 additions and 111 deletions
-
143components/lf-waterfall/lf-waterfall.vue
-
7pages.json
-
117pages/index/index.vue
-
91pages/recommList/index.vue
@ -0,0 +1,143 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<u-waterfall v-model="list"> |
||||
|
<template v-slot:left="{leftList}"> |
||||
|
<view class="list-warter" v-for="(item, index) in leftList" :key="index" @click="onClick"> |
||||
|
<u-lazy-load threshold="-450" :image="item.image" :index="index"> |
||||
|
<view class="list-label">已售8777</view> |
||||
|
</u-lazy-load> |
||||
|
<view class="lf-p-20"> |
||||
|
<view class="list-title"> |
||||
|
{{item.title}} |
||||
|
</view> |
||||
|
<view class="list-price"> |
||||
|
<text>{{item.price}}元</text> |
||||
|
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">¥399.00</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
<template v-slot:right="{rightList}"> |
||||
|
<view class="list-warter" v-for="(item, index) in rightList" :key="index" @click="onClick"> |
||||
|
<u-lazy-load threshold="-450" :image="item.image" :index="index"> |
||||
|
<view class="list-label">已售8777</view> |
||||
|
</u-lazy-load> |
||||
|
<view class="lf-p-20"> |
||||
|
<view class="list-title"> |
||||
|
{{item.title}} |
||||
|
</view> |
||||
|
<view class="list-price"> |
||||
|
<text>{{item.price}}元</text> |
||||
|
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">¥399.00</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
</u-waterfall> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: [] |
||||
|
} |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
onClick(){ |
||||
|
console.log("aaaa"); |
||||
|
this.$emit('click'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
// ==== |
||||
|
.list-warter { |
||||
|
border-radius: 8px; |
||||
|
margin: 10px 5px; |
||||
|
margin-top: 0px; |
||||
|
background-color: #ffffff; |
||||
|
// padding: 8px; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.u-close { |
||||
|
position: absolute; |
||||
|
top: 32rpx; |
||||
|
right: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.list-image { |
||||
|
width: 100%; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.list-title { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
color: $u-main-color; |
||||
|
} |
||||
|
|
||||
|
.list-label{ |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
background-color: rgba(0,0,0,0.5); |
||||
|
width: 140rpx; |
||||
|
height: 48rpx; |
||||
|
border-radius: 20rpx 0rpx 0rpx 0rpx; |
||||
|
font-size: 22rpx; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 48rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.list-tag { |
||||
|
display: flex; |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
|
||||
|
.list-tag-owner { |
||||
|
background-color: $u-type-error; |
||||
|
color: #FFFFFF; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 4rpx 14rpx; |
||||
|
border-radius: 50rpx; |
||||
|
font-size: 20rpx; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
|
||||
|
.list-tag-text { |
||||
|
border: 1px solid $u-type-primary; |
||||
|
color: $u-type-primary; |
||||
|
margin-left: 10px; |
||||
|
border-radius: 50rpx; |
||||
|
line-height: 1; |
||||
|
padding: 4rpx 14rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
border-radius: 50rpx; |
||||
|
font-size: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.list-price { |
||||
|
font-size: 30rpx; |
||||
|
color: $u-type-error; |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
// ==== |
||||
|
</style> |
||||
@ -0,0 +1,91 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view class="lf-p-t-20 head" v-if="tab_list.length"> |
||||
|
<u-tabs :list="tab_list" :is-scroll="true" :current="current" @change="tabChange"></u-tabs> |
||||
|
</view> |
||||
|
<swiper :style="{height: 'calc('+ windowHeight +'px - 110rpx)', width: '750rpx'}" :current="current" @change="swiperChange"> |
||||
|
<swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex"> |
||||
|
<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh"> |
||||
|
1111 |
||||
|
</scroll-view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
tab_list: [{ |
||||
|
name: '推荐', |
||||
|
list: [] |
||||
|
},{ |
||||
|
name: '酒店', |
||||
|
list: [] |
||||
|
},{ |
||||
|
name: '景点', |
||||
|
list: [] |
||||
|
},{ |
||||
|
name: '国内游', |
||||
|
list: [] |
||||
|
},{ |
||||
|
name: '国际游', |
||||
|
list: [] |
||||
|
},{ |
||||
|
name: '跟团游', |
||||
|
list: [] |
||||
|
}], |
||||
|
current: 0, |
||||
|
windowHeight: 0, |
||||
|
isRefresher: false // scroll-view下拉刷新状态，当前默认没有触发 |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
this.windowHeight = getApp().globalData.windowHeight; |
||||
|
}, |
||||
|
methods: { |
||||
|
tabChange(){ |
||||
|
this.current = current; |
||||
|
}, |
||||
|
// 滑块下标值变化 |
||||
|
swiperChange(event){ |
||||
|
this.current = event.detail.current; |
||||
|
// if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理 |
||||
|
// if(this.tab_list[event.detail.current].list.length <= 0){ |
||||
|
// this.getGoodsList(); // tab下没有数据，请求第一页 |
||||
|
// } |
||||
|
}, |
||||
|
// 页面触底，加载下一页 |
||||
|
onScrolltolower(){ |
||||
|
return; |
||||
|
let tab_item = this.tab_list[this.current]; |
||||
|
if(tab_item.isPage){ |
||||
|
tab_item.page = tab_item.page + 1; |
||||
|
this.getGoodsList(); |
||||
|
} |
||||
|
}, |
||||
|
// scroll-view 下拉刷新 |
||||
|
onRefresherrefresh(){ |
||||
|
this.isRefresher = true; |
||||
|
return; |
||||
|
this.getCategoryList({type: 'scrollRefresh'}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
page{ |
||||
|
background-color: #F6F6F6; |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.head{ |
||||
|
background-color: #FFFFFF; |
||||
|
} |
||||
|
.com{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue