uni-app之旅-day04-商品列表

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

6. 商品列表

6.0 创建 goodslist 分支

git checkout -b goodslist

6.1 定义请求参数对象

• 🌭🌭🌭根据接口的要求，事先定义一个请求参数对象

data() {
			return {
				// 请求参数对象
				queryObj:{
					// 查询关键词
					query:'',
					// 商品分类Id
					cid:'',
					// 页码值
					pagenum:1,
					// 每页显示多少条数据
					pagesize:10
				},
				//商品列表的数据
				goodsList:[],
				//总数量
				total:0
			};
		},

6.2 获取商品列表数据

• 将页面跳转时携带的参数，转存到 queryObj 对象中

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);
		console.log(res)
		if(res.meta.status !== 200) return uni.$showMsg()
		this.goodsList = res.message.goods;
		this.total = res.message.total; 
	}
}

6.3 渲染商品列表结构

<view class="goods-list">
			<block v-for="(goods,i) in goodsList" :key="i">
				<view class="goods-item">
					<!-- 左侧图片区域 -->
					<view class="goods-item-left">
						<image class="goods-pic" :src="goods.goods_small_logo || defaultPic" mode=""></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>
.goods-item{
	display: flex;
	padding: 10px 5px;
	border-bottom:1px solid #f0f0f0 ;
	.goods-item-left{
		margin-right: 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-price{
			font-size: 16px;
			color: #c00000;
		}
	}
}

6.4 把商品 item 项封装为自定义组件

• 在 components 目录上鼠标右键，选择 新建组件
• 将 goods_list 页面中，关于商品 item 项相关的 UI 结构、样式、data 数据，封装到 my-goods 组件中
• 在 goods_list 组件中，循环渲染 my-goods 组件即可

 // 定义 props 属性，用来接收外界传递到当前组件的数据
    props: {
      // 商品的信息对象
      goods: {
        type: Object,
        defaul: {},
      },
    },

在 goods_detail 组件中，循环渲染 my-goods 组件即可

 <block v-for="(item, i) in goodsList" :key="i">
    <!-- 为 my-goods 组件动态绑定 goods 属性的值 -->
    <my-goods :goods="item"></my-goods>
  </block>

6.5 使用过滤器处理价格

• 🐱‍🏍🐱‍🏍🐱‍🏍在 my-goods 组件中，和 data 节点平级，声明 filters 过滤器节点

filters:{
	tofixed(num){
		return Number(num).toFixed(2) 
	}
}

<!-- 商品价格 -->
				<view class="goods-price">
					￥{{goods.goods_price | tofixed}}
				</view>

6.6 上拉加载更多

6.6.1 初步实现上拉加载更多

• 打开项目根目录中的 pages.json 配置文件，为 subPackages 分包中的 goods_list 页面配置上拉触底的距离

"subPackages":[
	{
		"pages":[
			{
					"path" : "goods_list/goods_list",
					"style" : {
						 "onReachBottomDistance": 150
					}
				}, 
		] 
	}
]

• 在 goods_list 页面中，和 methods 节点平级，声明 onReachBottom 事件处理函数，用来监听页面的上拉触底行为

onReachBottom(){
// 让页码值自增 +1
	this.queryObj.pagenum += 1
	// 重新获取列表数据
	this.getGoodsList()
}

• 改造 methods 中的 getGoodsList 函数，当列表数据请求成功之后，进行新旧数据的拼接处理

methods:{
	async getGoodsList(){
	//...
		// this.goodsList = res.message.goods;
				this.goodsList = [...this.goodsList,...res.message.goods] 
	}
}

6.6.2 通过节流阀防止发起额外的请求

• 在 data 中定义 isloading 节流阀

//是否正在请求数据
				isloading:false

• 修改 getGoodsList 方法，在请求数据前后，分别打开和关闭节流阀

methods:{
//发起请求
				const {data:res}  = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
	//关闭
				this.isloading = false
}

• 在 onReachBottom 触底事件处理函数中，根据节流阀的状态，来决定是否发起请求

	//触底事件
		onReachBottom (){
		 // 判断是否还有下一页数据
			if(this.queryObj.pagenum * this.queryObj.pagesize >= this.total){
				return uni.$showMsg('数据加载完毕!')
			}
			// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			if(this.isloading) return
			this.queryObj.pagenum += 1
			this.getGoodsList()
		},

6.7 下拉刷新

• 在 pages.json 配置文件中，为当前的 goods_list 页面单独开启下拉刷新效果

"subPackages":[
	{
    "path": "goods_list/goods_list",
    "style": {
      "onReachBottomDistance": 150,
      "enablePullDownRefresh": true,
      "backgroundColor": "#F8F8F8"
    }
  },
]

• 监听页面的 onPullDownRefresh 事件处理函数

// 下拉刷新的事件
onPullDownRefresh() {
  // 1. 重置关键数据
  this.queryObj.pagenum = 1
  this.total = 0
  this.isloading = false
  this.goodsList = []

  // 2. 重新发起请求
  this.getGoodsList(() => uni.stopPullDownRefresh())
}

• 修改 getGoodsList 函数，接收 cb 回调函数并按需进行调用

// 获取商品列表数据的方法
async getGoodsList(cb){
	  this.isloading = false
  // 只要数据请求完毕，就立即按需调用 cb 回调函数
  cb && cb()
}

6.8 点击商品 item 项跳转到详情页面

• 将循环时的 block 组件修改为 view 组件，并绑定 click 点击事件处理函数：

<view class="goods-list">
  <view v-for="(item, i) in goodsList" :key="i" @click="gotoDetail(item)">
    <!-- 为 my-goods 组件动态绑定 goods 属性的值 -->
    <my-goods :goods="item"></my-goods>
  </view>
</view>

• 在 methods 节点中，定义 gotoDetail 事件处理函数

//点击跳转到商品详情页面
			gotoDetail(item){
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
				})
			}

6.9 分支的合并与提交

• 将 goodslist 分支进行本地提交
  –git add .
  –git commit -m ‘商品列表’

• 将本地goodslist分支提交到远端
  –git push -u origin goodslist

• 将本地goodslist分支合并到master
  –git checkout master
  –git merge goodslist

• 本地master推送到远端
  –git push