<template>
<view class="container">
<view class="main">
<view class="product">
<view class="product-content u-flex-between u-flex-wrap u-col-top">
<view class="li" v-for="(item,index) in recommendList" :key="index">
<u-image :src="item.base_cover_image" width="347rpx" height="347rpx" radius="21rpx 21rpx 0 0">
<template v-slot:loading>
<u-loading-icon></u-loading-icon>
</template>
</u-image>
<!-- <image :src="item.base_cover_image" class="imagestyle" mode="widthFix">
</image> -->
<view class="info">
<view class="name">{{item.name}}</view>
<view class="content u-flex-between">
<view class="price">¥{{item.price}}</view>
<view class="btn-content u-flex-between">
<view class="cart u-flex-center u-col-center">
<image src="/static/icon/gouwuche.png" class="imagestylecar" mode="widthFix">
</image>
</view>
<view class="buy">购买</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
recommendList: [],
page: 1,
loadStatus: 0,
total: 0,
}
},
onLoad() {
this.handrecommendList();
},
onShow() {},
methods: {
handrecommendList() {
uni.showLoading({
title: '加载中'
})
this.$http.post("product/recommendList", {
page: this.page,
}).then(res => {
uni.hideLoading()
this.recommendList = this.recommendList.concat(res.data.productList)
this.total = res.data.total;
}).catch(ex => {
this.$common.errorToast();
})
},
// 上拉加载
onReachBottom() {
if (this.total > this.recommendList.length) {
this.page++;
this.loadStatus = 2; // 上滑加载中
this.handrecommendList();
}
},
}
}
</script>
<style lang="scss">
page {
background-color: #EFEFEF;
}
.container {
height: 100%;
.main {
.product {
width: 710rpx;
padding: 0 20rpx 40rpx;
.product-content {
.loading {
width: 347rpx;
height: 347rpx;
background-color: red;
}
.li {
width: 347rpx;
margin-bottom: 20rpx;
background-color: #FFFFFF;
border-radius: 21rpx;
.imagestyle {
width: 347rpx;
min-height: 347rpx;
max-height: 350rpx;
}
.info {
padding: 20rpx 27rpx 13rpx 22rpx;
border-radius: 0rpx 0rpx 21rpx 21rpx;
.name {
font-size: 26rpx;
}
.content {
margin-top: 20rpx;
.price {
font-size: 26rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #F76E00;
line-height: 50rpx;
}
.btn-content {
width: 130rpx;
height: 44rpx;
background: #E95D2D;
border-radius: 22rpx;
.cart {
width: 65rpx;
height: 44rpx;
background: #F76E00;
border-radius: 22rpx 0rpx 0rpx 22rpx;
.imagestylecar {
width: 30rpx;
height: 30rpx;
}
}
.buy {
width: 65rpx;
height: 44rpx;
background: #E95D2D;
border-radius: 0rpx 22rpx 22rpx 0rpx;
font-size: 21rpx;
color: #FFFFFF;
line-height: 44rpx;
text-align: center;
}
}
}
}
}
}
}
}
}
</style>
4 个回复
2***@qq.com (作者) - 程序员
http://h5.yxw.scyccs.com/test.mp4
视频链接
2***@qq.com (作者) - 程序员
<template>
<view class="container">
<view class="main">
<view class="product">
<view class="product-content u-flex-between u-flex-wrap u-col-top">
<view class="li" v-for="(item,index) in recommendList" :key="index">
<u-image :src="item.base_cover_image" width="347rpx" height="347rpx" radius="21rpx 21rpx 0 0">
<template v-slot:loading>
<u-loading-icon></u-loading-icon>
</template>
</u-image>
<!-- <image :src="item.base_cover_image" class="imagestyle" mode="widthFix">
</image> -->
<view class="info">
<view class="name">{{item.name}}</view>
<view class="content u-flex-between">
<view class="price">¥{{item.price}}</view>
<view class="btn-content u-flex-between">
<view class="cart u-flex-center u-col-center">
<image src="/static/icon/gouwuche.png" class="imagestylecar" mode="widthFix">
</image>
</view>
<view class="buy">购买</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
recommendList: [],
page: 1,
loadStatus: 0,
total: 0,
}
},
onLoad() {
this.handrecommendList();
},
onShow() {},
methods: {
handrecommendList() {
uni.showLoading({
title: '加载中'
})
this.$http.post("product/recommendList", {
page: this.page,
}).then(res => {
uni.hideLoading()
this.recommendList = this.recommendList.concat(res.data.productList)
this.total = res.data.total;
}).catch(ex => {
this.$common.errorToast();
})
},
// 上拉加载
onReachBottom() {
if (this.total > this.recommendList.length) {
this.page++;
this.loadStatus = 2; // 上滑加载中
this.handrecommendList();
}
},
}
}
</script>
<style lang="scss">
page {
background-color: #EFEFEF;
}
</style>
6***@qq.com - 江河湖海
解决了吗
z***@yeah.net
有解决吗