Leadfyy.co
/
uniapp-hainan
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页/我的/推荐瀑布流优化

test
Enzo 5 years ago
parent
4d45173f5a
commit
18884519d4
6 changed files with 360 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 159
      components/lf-waterfall-my/lf-waterfall.vue
  2. 167
      components/lf-waterfall-recom/lf-waterfall.vue
  3. 16
      components/lf-waterfall/lf-waterfall.vue
  4. 15
      pages/index/index.vue
  5. 19
      pages/recommList/index.vue
  6. 6
      pages/user/user.vue

159
components/lf-waterfall-my/lf-waterfall.vue
View File

@ -0,0 +1,159 @@
<template>
<view>
<u-waterfall v-model="dataList" ref="uWaterfall">
<template v-slot:left="{leftList}">
<view class="list-warter" v-for="(item, index) in leftList" :key="index" @click="onClick(item.id)">
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.product.picture" :index="index">
<view class="list-label">已售{{item.sale}}</view>
</u-lazy-load>
<view class="lf-p-20">
<view class="list-title">
{{item.product.title}}
</view>
<view class="list-price">
<!-- <text>{{item.price}}元</text> -->
<lf-price :price="item.price"></lf-price>
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
</view>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="list-warter" v-for="(item, index) in rightList" :key="index" @click="onClick(item.id)">
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.product.picture" :index="index">
<view class="list-label">已售{{item.sale}}</view>
</u-lazy-load>
<view class="lf-p-20">
<view class="list-title">
{{item.product.title}}
</view>
<view class="list-price">
<!-- <text>{{item.price}}元</text> -->
<lf-price :price="item.price"></lf-price>
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
</view>
</view>
</view>
</template>
</u-waterfall>
</view>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: []
}
},
data(){
return {
}
},
computed: {
dataList() {
return this.list
}
},
onShow(){
},
destroyed() {
},
methods: {
onClick(id){
console.log("aaaa");
this.$url('/pages/goodsDetail/index?goods_id='+id);
this.$emit('click');
},
clear() {
this.$refs.uWaterfall.clear();
}
}
}
</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;
display: flex;
align-items: center;
}
// ====
</style>

167
components/lf-waterfall-recom/lf-waterfall.vue
View File

@ -0,0 +1,167 @@
<template>
<view>
<u-waterfall v-model="dataList" ref="uWaterfall">
<template v-slot:left="{leftList}">
<view class="list-warter" v-for="(item, index) in leftList" :key="index" @click="onClick(item.id)">
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.product.picture" :index="index">
<view class="list-label">已售{{item.sale}}</view>
</u-lazy-load>
<view class="lf-p-20">
<view class="list-title">
{{item.product.title}}
</view>
<view class="list-price">
<!-- <text>{{item.price}}元</text> -->
<lf-price :price="item.price"></lf-price>
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
</view>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="list-warter" v-for="(item, index) in rightList" :key="index" @click="onClick(item.id)">
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.product.picture" :index="index">
<view class="list-label">已售{{item.sale}}</view>
</u-lazy-load>
<view class="lf-p-20">
<view class="list-title">
{{item.product.title}}
</view>
<view class="list-price">
<!-- <text>{{item.price}}元</text> -->
<lf-price :price="item.price"></lf-price>
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
</view>
</view>
</view>
</template>
</u-waterfall>
</view>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: []
}
},
data(){
return {
}
},
computed: {
dataList() {
console.log('数据1111',this.list);
let arr = [];
if(this.list && this.list.length){
arr = this.list;
}
return arr;
}
},
onShow(){
},
destroyed() {
},
methods: {
onClick(id){
console.log("aaaa");
this.$url('/pages/goodsDetail/index?goods_id='+id);
this.$emit('click');
},
clear() {
this.$refs.uWaterfall.clear();
}
}
}
</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;
display: flex;
align-items: center;
}
// ====
</style>

16
components/lf-waterfall/lf-waterfall.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<view> <view>
<u-waterfall v-model="list">
<u-waterfall v-model="dataList" ref="uWaterfall">
<template v-slot:left="{leftList}"> <template v-slot:left="{leftList}">
<view class="list-warter" v-for="(item, index) in leftList" :key="index" @click="onClick(item.id)"> <view class="list-warter" v-for="(item, index) in leftList" :key="index" @click="onClick(item.id)">
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.product.picture" :index="index"> <u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.product.picture" :index="index">
@ -52,14 +52,24 @@
} }
}, },
onLoad(){
computed: {
dataList() {
return this.list
}
},
onShow(){
},
destroyed() {
}, },
methods: { methods: {
onClick(id){ onClick(id){
console.log("aaaa");
this.$url('/pages/goodsDetail/index?goods_id='+id); this.$url('/pages/goodsDetail/index?goods_id='+id);
this.$emit('click'); this.$emit('click');
},
clear() {
this.$refs.uWaterfall.clear();
} }
} }
} }

15
pages/index/index.vue
View File

@ -90,7 +90,7 @@
<lf-title-line></lf-title-line> <lf-title-line></lf-title-line>
<!-- 商品列表-瀑布流 --> <!-- 商品列表-瀑布流 -->
<view style="padding: 0 20rpx;"> <view style="padding: 0 20rpx;">
<lf-waterfall :list="recomm_list"></lf-waterfall>
<lf-waterfall :list="recomm_list" ref="uWaterfall"></lf-waterfall>
<!-- <u-loadmore v-if="recomm_list.length" status="已加载全部数据~" @loadmore="addRandomData"></u-loadmore> --> <!-- <u-loadmore v-if="recomm_list.length" status="已加载全部数据~" @loadmore="addRandomData"></u-loadmore> -->
<view class="loading-more"> <view class="loading-more">
<text :class="{'loading-more-text': loading_class}" v-if="recomm_list.length">{{ loading_text }}</text> <text :class="{'loading-more-text': loading_class}" v-if="recomm_list.length">{{ loading_text }}</text>
@ -128,26 +128,14 @@
} }
}, },
onShow() { onShow() {
// this.addRandomData();
this.getIndexData() this.getIndexData()
this.getFavourite() this.getFavourite()
}, },
methods: { methods: {
// 瀑布流随机模拟数据
addRandomData() {
for(let i = 0; i < 10; i++) {
let index = this.$u.random(0, this.list.length - 1);
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
let item = JSON.parse(JSON.stringify(this.list[index]))
item.id = this.$u.guid();
this.recomm_list.push(item);
}
},
//获取猜你喜欢 //获取猜你喜欢
getFavourite() { getFavourite() {
this.$http(this.API.API_FAVOURITE).then(res => { this.$http(this.API.API_FAVOURITE).then(res => {
this.recomm_list = res.data.data this.recomm_list = res.data.data
console.log(res)
}).catch(err => { }).catch(err => {
}) })
@ -190,6 +178,7 @@
}, },
onPullDownRefresh(){ onPullDownRefresh(){
this.getIndexData() this.getIndexData()
this.getFavourite()
}, },
onShareAppMessage(){ onShareAppMessage(){
let shareInfo = { let shareInfo = {

19
pages/recommList/index.vue
View File

@ -6,12 +6,15 @@
<lf-nocontent v-else></lf-nocontent> <lf-nocontent v-else></lf-nocontent>
<swiper :style="{height: 'calc('+ windowHeight +'px - 60rpx)', width: '750rpx'}" :current="current" @change="swiperChange"> <swiper :style="{height: 'calc('+ windowHeight +'px - 60rpx)', width: '750rpx'}" :current="current" @change="swiperChange">
<swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex"> <swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex">
<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="tabItem.isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
<scroll-view class="com" :scroll-y="true" :refresher-enabled="false" :refresher-triggered="tabItem.isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
<view class="lf-m-t-20"></view> <view class="lf-m-t-20"></view>
<lf-waterfall :list="tabItem.list"></lf-waterfall>
<lf-waterfall :list="tabItem.list" ref="uWaterfall"></lf-waterfall>
<view class="loading-more lf-m-b-10"> <view class="loading-more lf-m-b-10">
<text :class="{'loading-more-text': tabItem.loadingClass}" v-if="tabItem.list.length">{{tabItem.loadingText}}</text> <text :class="{'loading-more-text': tabItem.loadingClass}" v-if="tabItem.list.length">{{tabItem.loadingText}}</text>
<lf-nocontent v-else></lf-nocontent> <lf-nocontent v-else></lf-nocontent>
<!-- <view>
{{tabItem.list.length}}
</view> -->
</view> </view>
</scroll-view> </scroll-view>
</swiper-item> </swiper-item>
@ -20,15 +23,19 @@
</template> </template>
<script> <script>
import lfWaterfall from '@/components/lf-waterfall-recom/lf-waterfall.vue';
export default { export default {
data(){ data(){
return { return {
tab_list: [], tab_list: [],
current: 0, current: 0,
windowHeight: 0,
windowHeight: 0
} }
}, },
onLoad(){
components: {
lfWaterfall
},
onShow(){
this.windowHeight = getApp().globalData.windowHeight; this.windowHeight = getApp().globalData.windowHeight;
this.getCategory() this.getCategory()
}, },
@ -84,6 +91,10 @@
}) })
}, },
tabChange(index){ tabChange(index){
this.$refs.uWaterfall[index].clear();
this.tab_list = []
this.getCategory({type: 'pageRefresh'});
console.log(this.$refs)
this.current = index; this.current = index;
if(this.tab_list[index].list.length <= 0){ if(this.tab_list[index].list.length <= 0){
this.getData(); // tab下没有数据，请求第一页 this.getData(); // tab下没有数据，请求第一页

6
pages/user/user.vue
View File

@ -94,7 +94,7 @@
</view> </view>
</view> --> </view> -->
<lf-title-line title="为你推荐"></lf-title-line> <lf-title-line title="为你推荐"></lf-title-line>
<lf-waterfall :list="list"></lf-waterfall>
<lf-waterfall :list="list" ref="uWaterfall"></lf-waterfall>
<view class="loading-more"> <view class="loading-more">
<text :class="{'loading-more-text': loading_class}" v-if="list.length">{{ loading_text }}</text> <text :class="{'loading-more-text': loading_class}" v-if="list.length">{{ loading_text }}</text>
<lf-nocontent v-else></lf-nocontent> <lf-nocontent v-else></lf-nocontent>
@ -106,11 +106,13 @@
</template> </template>
<script> <script>
import lfWaterfall from '@/components/lf-waterfall-my/lf-waterfall.vue';
import lfTitleLine from '@/components/lf-title-line/lf-title-line.vue'; import lfTitleLine from '@/components/lf-title-line/lf-title-line.vue';
let time = null; let time = null;
export default { export default {
components: { components: {
lfTitleLine
lfTitleLine,
lfWaterfall
}, },
data() { data() {
return { return {

Write Preview
Loading…
Cancel
Save