03 uniapp/微信小程序 项目day03

一.商品列表

1.1 获取数据

首先能够进入商品列表的途径

image-20220818180220982

image-20220818180236956

image-20220818180254182

传的数据有

image-20220818180310650

image-20220818180328519

image-20220818180336127

了解了这个之后就可以开始了，先创建分支

创建编译模式，并分配初试数据

image-20220818180506771

这个时候就可以获取数据了

需要的数据

image-20220818180823305

所以在发起请求之前需要整理一下数据，先定义数据

image-20220818180950897

整理数据发起请求

image-20220818182243282

1.2 渲染页面

注意我们可以去定义一个默认的图片在data，如果当前这个图片没有就为默认图片

image-20220818183356498

image-20220818183401052

1.3 item封装自定义组件

创建组件

image-20220818184821739

新建插件

image-20220818184848921

然后将我们的结构复制过来，样式也复制过来

image-20220818185020932

然后就是组件利用方面，既然封装的是item组件，就要提现item组件的复用性，所以item这个组件必然是在父组件里面被vfor的

所以遍历应该在父组件这边就完成，那么给子组件得到的数据就是每一个具体的goods，就可以先去改造子组件了

记得将默认图片也放在子组件

image-20220818185836724

父组件的改造

image-20220818185922649

然后子组件这边要接受

image-20220818185942847

注意props的简写形式，直接在后面为一个数组

image-20220818190639474

1.4 过滤器处理价格

回顾一下vue的过滤器

首先关键字filters

然后里面是一个函数形式，靠的是返回值，传进来的参数是等会要用的地方的插值语法的参数

image-20220818191043338

用的时候通过一个管道符连接，前面的值就相当于参数

image-20220818191159601

1.5 上拉加载更多

首先修改我们的下拉触底的距离

注意，在uniapp里面没有单独的json文件，所以所有的页面的json修改都在同体的pages.json里面，对应的下面有一个对象这个就是他单独的json配置

image-20220818193600918

image-20220818193706129

然后在这个分包的下拉触底事件来操作

下拉刷新一次，就将页码加一页，同时请求数据里面也要改造一下，赋值我们的列表数据，需要 进行一个扩展运算符的融合

image-20220818194134956

然后解决两个下拉触底经典问题

第一个是节流阀的问题，不能托底过快导致请求好几次数据

声明一个节流阀

image-20220818194355352

为什么放在下面表示数据请求完毕了才让他为fasle的，因为这是await，所以只有返回成功了才会进入下一步

image-20220818194629464

然后下拉触底事件判断

为true就出去，因为为true表示正在请求数据

image-20220818194734773

第二个问题是：数据刷新完毕不应该再发起数据请求

这里也有一个公式 当前页×每页展示数据大于等于总数据的话就说明到头了不能请求数据了

image-20220818195351505

1.6 上拉刷新

首先还是先开启上拉刷新

image-20220818200336355

然后在上拉刷新事件做处理

然后有一个很关键的步骤重新获取数据，我会传一个回调，来关闭下拉刷新效果

image-20220818200553206

记住这种形式，用短路运算来判断有无回调，有就执行，没得就不执行

image-20220818200633577

1.6.1 存在问题 上拉刷新回调无效

1.7 跳转商品详情页面

将block组件改为view组件，绑定click事件

image-20220818202430468

image-20220818202545036

二.商品详情

首先创建分支并创建编译模式

image-20220822135233083

然后发起请求

一样的data定义数据，onload发起函数调用，methods定义请求函数

image-20220822135618242

然后数据赋值

image-20220822135730220

2.1 轮播图效果

定义轮播图结构

image-20220822140914808

然后实现轮播图预览效果

用到uni的一个api previewImage，需要当前照片的索引，第二个参数是一个数组，里面每一项为照片的url地址

image-20220822162321420

返回一个新数组，并且返回的值为每一张big照片

image-20220822162456727

2.2 商品信息区

定义ui结构，并渲染

image-20220822163553776

image-20220822163705762

2.3 商品详情页

这里由于服务器返回的是直接带html标签的一串文本，所以这类要用到小程序专门用来解析html字符串的组件富文本rich-text

里面有一个nodes属性为字符串即可

image-20220822170929474

问题1：

中间会有空隙

其根本原因还是因为 img标签为行内块的原因，这里应该把img都变成block

image-20220822171705992

采用的方法是replace来替换

注意前面如果要加g/i等参数表示是这个

image-20220822173349868

问题2：

价格在刷新一瞬间为undefined的问题

直接条件渲染即可

image-20220822173500686

2.4 商品导航区

有现成的组件，通过 uni-goods-nav这个组件来使用

首先需要定义数据

image-20220822175523352

options表示左边的按钮区域，buttongroup表示右边的区域

然后他的组件写上来

image-20220822175653697

image-20220822175657968

将其固定定位，并记得整个父盒子有个padding-bottom

关于他的点击事件

click表示左边的区域点击事件，buttonclick表示右边的区域点击事件

image-20220822175904974

里面接受一个形参e，可以拿到你点击的这个区域的一些信息

image-20220822180204609

posted @ 2022-11-08 09:45  Heymar-10  阅读(305)  评论(0)  编辑  收藏  举报