今天是学习小程序的第6
天
学习内容
1. 商品详情-获取数据2. 商品详情-轮播图渲染3. 商品详情-价格、名称、图文详情4. 商品详情-优化动态渲染5. 商品详情-放大预览图片6. 商品详情-底部工具栏7. 商品详情-点击加入购物车1. 商品详情-获取数据
现在来实现点击商品跳转商品详情页:
在我们的商品navigator
标签上加上url
属性,同时还要传递参数
在pages/goods_detail/index.js
的onLoad()
函数中,可以获取到这个传递过来的参数
接下来要发送请求,获取商品详情数据
这两种方法都能用
onLoad()
中调用getGoodsDetail()
并把商品id传过去
成功获取到数据
2. 商品详情-轮播图渲染
分析一下获得的商品数据,找到关于轮播图的数据是哪部分
3. 商品详情-价格、名称、图文详情
商品价格、名称这部分很简单,就设置一下样式就好
图文详情里的图片不是我们自己通过标签写的,获取的商品数据里面就有对应的标签内容
这时候就要用<rich-text>
标签,可以将字符串解析为对应html
内容
4. 商品详情-优化动态渲染
我们获取到的商品数据保存在了goodsObj
中,但是实际上用到的并没有那么多,这样会影响小程序的性能
5. 商品详情-放大预览图片
要实现的功能是点击轮播图,可以预览大图
预览功能主要是调用了小程序的一个api:previewImage()
https://developers./miniprogram/dev/api/media/image/wx.previewImage.html
先给swiper-item
绑定一下点击事件handlePreview
urls
属性是要预览的图片的url数组,就在我们前面获取的商品数据里
current
是当前显示的图片的url
这里current
先放第一张图试试
现在已经可以正常预览,也可以往后翻
但是如果我们点击了轮播图的第一张图之后的图,一开始先显示的也是第一张
所以点击轮播图的时候,我们要传参,从而得知点击了哪一张图,就让预览的时候先显示哪一张图
6. 商品详情-底部工具栏
样式不放了,慢慢调哈
这里注意底部栏定位在最下方之后会挡住一部分页面
给page
设置一个padding-bottom
为底部栏的高度即可
之后实现一些点击底部栏的功能:
点击客服,要打开客服对话,这个可以通过设置<button>
的open-type
为contact
实现
可以把我们的view
标签改成button
标签,但是button
应该有一些默认样式,我们也可以直接加一个button
标签,在样式部分设置button
标签绝对定位,高度宽度100%,透明度为0
点击分享,可以转发当前小程序给微信朋友,通过设置<button>
的open-type
为share
实现。这里和客服的实现基本相同就不放图了
点击购物车,可以跳转到购物车页面
这里的实现不能用<navigator>
标签的url
属性,也不能调用wx.navigateTo()
这两种方法都不支持跳到tabbar
页面,而我们的购物车就属于tabbar
页面
我们应该要用wx.switchTab()
方法(或者设置<navigator>
标签的open-type
为switchTab
也可以)
7. 商品详情-点击加入购物车
我们使用本地存储技术来缓存购物车数据
新增了一个全局对象goodsInfo
,在获取商品数据的时候赋值:
注意这里要赋值为res.data.message
给加入购物车
按钮绑定addToCart()
事件
圈起来的这一步一定不能漏掉|| []
,因为第一次的时候本地存储中的购物车数据是空的,不是数组就调用不了findIndex()
方法
这里的判断用find()
也可以,但是因为后面再次添加商品的时候,需要找到商品在本地存储数组中的索引,所以用findIndex()
num
属性记录商品被添加进购物车的次数
商品详情页-完