商品列表页 - 小程序

<template>
	<view>
		<u-swiper :list="slides" name="img_url" height="320rpx"></u-swiper>
		<!-- 选项卡 -->
		<view class="u-text-center u-m-t-30">
			<u-tabs :list="sortList" bar-width="80" item-width="160" :current="currentSort" 
			@change="changeSort"></u-tabs>
		</view>
		<u-row gutter="16" class="u-skeleton">
			<!-- 一共12格子，一行显示两个商品 -->
			<u-col span="6" v-for="(goods,index) in  goodsList" :key="index">
				<goods_card :goods="goods"></goods_card>
			</u-col>
		</u-row>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>
<script>
	export default {
		data() {
		return {
			sortList: [
				{name: '默认'},
				{name: '销量'},
				{name: '推荐'},
				{name: '最新'},
			],
			currentSort: 0,
			// 轮播图数据
			slides: [],
			// 下面商品数据
			goodsList: [{},{},{},{}],
			// 页面
			page: 1,
			// 是否显示骨架屏
			loading: true
		}
	},
		onLoad() {
		this.getData()
	},
		methods: {
			// 点击中间的选项卡触发函数
			changeSort(index){
				// index为选项卡的编号，第一个为0
				console.log(index);
				// currentSort不同就可以根据不同的编号来确定筛选条件
				this.currentSort = index
				// 先初始化商品数据页和分页，在获取数据
				this.goodsList = [{},{},{},{}]
				this.page = 1
				this.getData()
			},
			async getData(){
				// 显示骨架屏
				this.loading = true
				
				const params = {
					page: this.page
				}
				if(this.currentSort == 1) {params.sales = 1}
				else if(this.currentSort == 2) {params.recommend = 1} 
				else if(this.currentSort == 3) {params.new = 1}
				const res = await this.$u.api.index(params)
				// 骨架屏隐藏
				this.loading = false
				console.log(res);
				// 做优化，下拉加载更多的时候，vue会把新数据和已有虚拟dom做对比，
				// 如果轮播图没有改变，就不会接收轮播图的数据
				this.slides = res.slides
				this.goodsList = this.goodsList.pop().title  ?  [...this.goodsList,...res.goods.data]  : [...res.goods.data] 
			}
		},
		onReachBottom(){
			this.page = this.page + 1
			this.getData()
		}
	}
</script>
<style lang="scss" scoped>
</style>