6.萌宠案例综合练习

1.页面布局

先写一个整体view,里面包含一个小整体view,再循环一个view里面的图片加文字,给它们设置样式,让图片保持居中,加一个mode属性的好处是可以让图片不变形

2.调用萌宠API接口渲染到页面中

先写一个方法函数,里面放入网络请求,然后把API接口写上,下面再定义data,里面放接口里面的属性名称,最后再使用then方法打印输出

再写一些样式让它变得更加好看

最后记得方法函数调用,不然没用

3.previewImage预览和lazy-load懒加载

首先在image图片标签里定义一个点击事件

在定义一个方法函数,里面放入uni.previewImage图片预览属性,里面获取它的索引位置和所有数组

使用map方法获取它所有的数组,最后便可以点击图片预览和滑动预览图片

4.对回调结果严格处理then_catch_finally用法

先给它做一个错误判断,有错误就让它报错,然后在then后面加上catch方法,如果有错误就会在页面中间显示错误信息

最后再加一个finally方法,不管有没有错误,这里面的代码都会执行

5.完成下拉刷新和触底加载更多

先导入触底加载和下拉刷新模块,再写两个函数方法调用发送网络请求方法

触底加载:使用了展开符,就是直接把内容拿出来,前面是老的,后面是新的,后调用发送网络请求方法 

下拉刷新:先清空,再调用发送网络请求方法,最后手动关闭下拉刷新

6.pageScrollTo滚动到顶部和刷新

写两个view,里面定义点击事件,然后创建两个函数方法,里面放入相对于的方法,再加一些令点击事件好看一点的样式

7.使用uni-ui扩展组件

主要是下载uni-icons 图标、uni-load-more加载更多和uni-segmented-control分段器组件

而后在写了一个点击菜单,这样我们就可以选择我们想看的图片,比如:单独的狗、猫、又或者一起查看,还没完成成功,只能菜单切换,不能内容跟着切换

记得每次下载完组件后要把小程序和浏览器重启,不然编译缓慢,跟不上

8.分段器字节实现切换萌宠类型

定义常量,拿到全部、狗、猫的内容和key,而后给它放入方法函数中使用

整体项目代码以及效果图: