uni-app微信小程序——商城(7)——商品详情

在我们讲完了最基础的四个tabBar栏之后,商城也算是初现模样,本篇文章将会介绍商品详情页面的制作,包括把商品加入购物车的功能、分享商品信息的功能等等

效果图如下:

uni-app微信小程序——商城(7)——商品详情_第1张图片uni-app微信小程序——商城(7)——商品详情_第2张图片

 

uni-app微信小程序——商城(7)——商品详情_第3张图片uni-app微信小程序——商城(7)——商品详情_第4张图片

 

首先是做了是个三图轮播的样式来展示该商品,然后是商品信息的介绍,接着是分享商品和商品类型的挑选,最后使用Vant Weapp中的GoodsAction 商品导航组件来返回首页和加入购物车等操作。

具体的代码如下:






在商品详情页面,我目前只是添加了将商品添加到购物车的操作,首先拿到本商品的具体信息,包括商品id,名称,价格等,将该数据信息储存到本地缓存,其实需要在main.json文件中引入Vuex,然后创建Vuex.Store,把数据保存到store上,然后购物车从store中获取缓存的商品数据,完成商品加入购物车的操作。

本篇文章就先写到这里,如有不足,还望斧正,谢谢~

你可能感兴趣的:(#,uni-app之微信小程序,小程序,前端,vue)