1.渲染商品列表并美化布局
<view class="goods-list"><block v-for="(goods,i) in goodsList" :key="i"><view class="goods-item"><!-- 左侧的盒子 --><view class="goods-item-left"><image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image></view><!-- 右侧的盒子 --><view class="goods-item-right"><!-- 商品的名字 --><view class="goods-name">{{goods.goods_name}}</view><view class="goods-info-box"><view class="goods-price">￥{{goods.goods_price}}</view></view></view></view></block></view>export default {data() {return {//请求参数对象queryObj: {//查询关键词query: '',//商品分类idcid: '',//页码值pagenum: 1,//每页显示多少条数据pagesize: 10},goodsList: [],total: 0,defaultPic: 'https://img1.baidu.com/it/u=347909717,3772510335&fm=253&fmt=auto&app=138&f=JPEG?w=609&h=500'};},onLoad(options) {this.queryObj.query = options.query || ''this.queryObj.cid = options.cid || ''this.getGoodsList()},methods: {//获取商品列表数据的方法async getGoodsList(){const{data: res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)if(res.meta.status !== 200){return uni.$showMsg()}this.goodsList = res.message.goodsthis.total = res.message.total}}
.goods-item{display: flex;padding: 10px 5px;border-bottom: 1px solid #f0f0f0;.goods-item-left{margin-left: 5px;.goods-pic{width: 100px;height: 100px;display: block;}}.goods-item-right{display: flex;flex-direction: column;justify-content: space-between;.goods-name{font-size: 13px;}.goods-info-box{.goods-price{color: #C00000;font-size: 16px;}}}2.封装商品列表
<view class="goods-list"><view v-for="(goods, i) in goodsList" :key="i" @click="gotoDetail(goods)"><my-goods :goods="goods"></my-goods></view></view><view class="goods-item"><!-- 左侧的盒子 --><view class="goods-item-left"><image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image></view><!-- 右侧的盒子 --><view class="goods-item-right"><!-- 商品的名字 --><view class="goods-name">{{goods.goods_name}}</view><view class="goods-info-box"><view class="goods-price">￥{{goods.goods_price | tofixed}}</view></view></view></view><script>export default {props: {goods: {type: Object,default: {}}},data() {return {// 默认的图片defaultPic: 'https://img0.baidu.com/it/u=596425167,3189264920&fm=253&fmt=auto&app=138&f=JPEG?w=361&h=500'};}}
</script>
3.过滤器处理商品价格
<view class="goods-info-box"><view class="goods-price">￥{{goods.goods_price | tofixed}}</view></view>filters: {tofixed(num) {//保留两位小数return Number(num).toFixed(2)}}4.上拉加载更多
pages.json
{"path" : "goods_list/goods_list","style" : {//上拉触底"onReachBottomDistance": 150}},async getGoodsList(cb) {const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)if (res.meta.status !== 200) return uni.$showMsg()//拼接数据this.goodsList = [...this.goodsList, ...res.message.goods]this.total = res.message.total},onReachBottom() {if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕!')// 让页码值自增+1this.queryObj.pagenum++this.getGoodsList()},5.节流阀
async getGoodsList(cb) {// 打开节流阀this.isloading = true}
onReachBottom() {//防止发起额外的请求if (this.isloading) return数据加载完毕不会发起额外请求
//判断是否还有下一页数据//当前页码值 * 每页显示多少条数据 >= 总数条数if(this.queryObj.pagenum * this.queryObj.pagesize >= this.total) {return uni.$showMsg('数据加载完毕')}6.下拉刷新
{"path" : "goods_list/goods_list","style" : {//上拉触底"onReachBottomDistance": 150,//开启下拉刷新"enablePullDownRefresh": true,"backgroundColor": "#F8F8F8"}},onPullDownRefresh() {// 重置关键数据this.queryObj.pagenum = 1this.total = 0this.isloading = falsethis.goodsList = []// 重新发起数据请求this.getGoodsList(() => uni.stopPullDownRefresh())}7.跳转到商品详情页
gotoDetail(goods) {uni.navigateTo({url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods.goods_id})}
)
)
