文章插图
第二个问题是：数据刷新完毕不应该再发起数据请求
这里也有一个公式 当前页×每页展示数据大于等于总数据的话就说明到头了不能请求数据了
文章插图
1.6 上拉刷新首先还是先开启上拉刷新
文章插图
然后在上拉刷新事件做处理
然后有一个很关键的步骤重新获取数据，我会传一个回调，来关闭下拉刷新效果
文章插图
记住这种形式，用短路运算来判断有无回调，有就执行，没得就不执行
文章插图
1.6.1 存在问题 上拉刷新回调无效1.7 跳转商品详情页面将block组件改为view组件，绑定click事件
文章插图
文章插图
二.商品详情首先创建分支并创建编译模式
文章插图
然后发起请求
一样的data定义数据 ， onload发起函数调用 ， methods定义请求函数
文章插图
然后数据赋值
文章插图
2.1 轮播图效果定义轮播图结构
文章插图
然后实现轮播图预览效果
用到uni的一个api previewImage，需要当前照片的索引，第二个参数是一个数组，里面每一项为照片的url地址
文章插图
返回一个新数组 ， 并且返回的值为每一张big照片
文章插图
2.2 商品信息区定义ui结构，并渲染
文章插图
文章插图
2.3 商品详情页这里由于服务器返回的是直接带html标签的一串文本，所以这类要用到小程序专门用来解析html字符串的组件富文本rich-text
里面有一个nodes属性为字符串即可
文章插图
问题1：
中间会有空隙
其根本原因还是因为 img标签为行内块的原因，这里应该把img都变成block
文章插图
采用的方法是replace来替换
注意前面如果要加g/i等参数表示是这个
文章插图
问题2：
价格在刷新一瞬间为undefined的问题
直接条件渲染即可
文章插图
2.4 商品导航区有现成的组件，通过 uni-goods-nav这个组件来使用
首先需要定义数据
文章插图
options表示左边的按钮区域，buttongroup表示右边的区域
然后他的组件写上来
文章插图
文章插图
将其固定定位，并记得整个父盒子有个padding-bottom
关于他的点击事件
click表示左边的区域点击事件，buttonclick表示右边的区域点击事件
文章插图
里面接受一个形参e，可以拿到你点击的这个区域的一些信息
文章插图
推荐阅读
![教你如何使用迅雷离线下载[新发布]](http://img.zhejianglong.com/220413/032F04306-0-lp.jpg)
- 【炫丽】从0开始做一个WPF+Blazor对话小程序
- 小米mixfold屏幕供应商_小米mix fold屏幕是哪家的
- 小米11pro和小米10pro哪个值得买_小米11pro和小米10pro区别对比
- 欧莱雅小蜜罐和复颜抗皱哪个好用_哪个更适合30岁的女人
- vivox70pro+和小米11的区别_哪款更值得买
- 航海王热小队决战活动玩法详解攻略
- 小米11pro支持无线充电吗_小米11pro电池容量多少
- 成语故事大全 短小成语故事大全100篇
- applewatchseries7可以微信支付吗_applewatch微信支付怎么用
- 华为P50Pro和小米12Pro拍照哪款好-对比评测