====================
快速跳转：
我的个人博客主页👉：Reuuse博客
新开专栏👉：Vue3专栏
参考文献👉：uniapp官网
免费图标👉：阿里巴巴矢量图标库
❀ 感谢支持！☀
==================
前情提要
🔺因为最近学习的vue语言，汇总了许多细小的知识，所以就有了本次系列的开始。❀❀❀
⭐当然啦，学习怎么可能离不开做项目呢！让我们汇总一下学的知识来做一个小案例吧！！
那么话不多说我们开始吧
❤👉 想要获取源码的请点赞➕关注➕私信 👈❤
vue
- 解决平台问题：在这里我用的是uniapp
第一步 页面布局
🔺在调用接口之前，可以用一个例图大概的调整一下页面布局，会好看很多喔！
作为一个合格的开发者，审美还是非常有需要的！
涉及知识点：
- mode=“widthFix”
图片会保持其原始宽度不变，高度会自动调整以适应宽度，从而避免图片变形。
<template>
<view class="container">
<view class="layout">
<view class = "box" v-for="item in 5">
<view class="pic">
<image src="../../static/1.png" mode="widthFix"></image>
</view>
<view class="text">====</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.container{
.layout{
padding: 50rpx;
.box{
margin-bottom: 60rpx;
box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
// 向y轴延申10像素，模糊值是32
border-radius: 15rpx;
overflow: hidden;
.pic{
image{
width: 100%;
}
}
.text{
padding: 30rpx;
}
}
}
}
</style>
那么这个就是结果展示图：
恭喜你！距离成功又近了一步！
调用API接口渲染到页面中
- 首先呢我们需要一个API接口！
- 随机猫咪API接口：https://api.thecatapi.com/v1/images/search?limit=1
将例图的url替换成item.url 这个在下面是有定义的👇
<template>
<view class="container">
<view class="layout">
<view class = "box" v-for="item in pets" :key="item.id">
<view class="pic">
<image :src="item.url" mode="widthFix"></image>
</view>
<view class="text">{{item.id}}</view>
<view class="area">{{item.width}}*{{item.height}}</view>
</view>
</view>
</view>
</template>
写了一个network函数用来调用接口的喔，这里的接口上面已经给出来了！
<script setup>
import {ref} from "vue";
const pets = ref([]);
function network(){
uni.request({
url:"https://api.thecatapi.com/v1/images/search",
data:{
limit:10
}
}).then(res=>{
console.log(res.data.data);
pets.value = res.data
})
}
//注意了写函数之后一定要调用调用！！！
network();
</script>
在这里的样式又补充了图片下方的文字样式，好看一点捏~
- text-align: right 元素内的文本靠右对齐
<style lang="scss" scoped>
.container{
.layout{
padding: 50rpx;
.box{
margin-bottom: 60rpx;
box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
// 向y轴延申10像素，模糊值是32
border-radius: 15rpx;
overflow: hidden;
.pic{
image{
width: 100%;
}
}
.text{
padding: 30rpx;
color:#333;
font-size: 36rpx;
}
.area{
padding:0 30rpx 30rpx;
text-align: right;
color: #888;
font-size: 28rpx;
}
}
}
}
</style>
然后最后展示图如下！
通过API接口传输头传递access-key
有一些时候呢，我们调用的接口并不是开源免费的，相反就会有限制条用次数，这个时候就需要access-key
access-key是什么呢？
- 它呀，其实就是一种用于身份验证和授权访问特定API（应用程序编程接口）资源的唯一标识符。就像我们进家门得用钥匙一样，API密钥就是应用程序访问API的 钥匙 啦！它允许客户端应用安全地与服务端通信，确保只有授权的请求才能被处理。
- 至于怎么做嘛，一般来说，你得先在服务提供商的官方网站申请API密钥，完成实名认证等步骤后，就能拿到你的专属“钥匙”咯。然后呢，在发送API请求时，你就需要把这个密钥添加到请求头或者URL参数中，这样服务端才能验证你的身份，给你提供相应的服务啦
❀ 在代码里面也只需要引入就好了！ 👇
但是呢，本次我们使用的是开源免费的！所以红框里面的也不需要，其他同学可以按需去条用喔！
previewImage图片预览
- uni.previewImage - 预览图片
⭐在这里我们想要新加一个功能，在点击图片后，可以出现一个全屏的预览！
🔺但是在这之前我们要认识两个很重要的参数！
1. current 参数
current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。App平台在 1.9.5至1.9.8之间，current为必填。不填会报错
☆ 注意，当 urls 中有重复的图片链接时：
- 传链接，预览结果始终显示该链接在 urls 中第一次出现的位置。
- 传索引值，在微信/百度/抖音小程序平台，会过滤掉传入的 urls 中该索引值之前与其对应图片链接重复的值。其它平台会保留原始的 urls 不会做去重处理。
在代码中应该是：
但是，光有current还不行
所以在这里我们需要第二个重要的参数！
2. urls参数
- urls - 需要预览的图片链接列表
但是有这么多图片该怎么办呢，我们需要一个数组，来包含所有生成图片的url，这里我们需要用到map循环
map循环
map循环是指对Map集合进行遍历操作。Map是一种以键值对方式存储数据的集合结构，将键映射到对象，键和对象之间有一个映射函数（散列函数），即 key -> f(x) -> value, 一个key只能对应一个value。它提供了一些方法来操作和访问Map中的元素。
let urls = pets.value.map(item=>item.url)
可以看到，下面的就是我们创建只包含url的数组了！
将导入的数组放到我们这个url里面去：
在下面代码中，current 和 urls 两个重要的参数都传输过去了！
uni.previewImage({
current: index,
urls
//当定义的变量和我们这个属性的变量一致的时候
//保留一个属性即可
//urls: urls
})
lazy-load懒加载
对于用户来说，我只查看了前面几张图，但是后台运行已经自动的将全部图片加载出来了，在后期对于服务器的负荷是很大的，所以这里就需要图片懒加载！！
- lazy-load - 只针对
page与scroll-view下的image有效
使用方法也非常的简单，只需要加上 lazy-load即可：
🔺注意：这个懒加载对于H5（浏览器）其实是不生效的（这个需要用到另外的组件），但是在小程序中是可以生效的。
触底加载更多
当滑到最后一张图片的时候还想要加载更多的时候，就需要触底加载了
在实现前提，别忘了要提前引入
import {onReachBottom} from "@dcloudio/uni-app"
触底之后要再次申请网络请求
//触底刷新
onReachBottom(()=>{
network();
})
这样就可以实现了，但是新的图片会把老的图片覆盖掉，那么该如何实现新图片和老图片进行拼接呢
- 那么数组是怎么拼接的呢？
这里就涉及到...展开符号，给一个例子就知道了
let arr1 = [1,2,3]
let arr2 = [4,5,6]
console.log ([...arr1, ...arr2])
看，打印出来就是一个拼接好的一维数组
既然知道如何做了，那么在网络请求函数里面加上就好了
pageScrollTo滚动到顶部和刷新
即就是在右下角有一个固定的按钮：
这个无可厚非，就只是考验CSS功底，在这里我就只把代码放出来，大家看一下就好了
两个盒子
<view class="float">
<view class="item">刷新</view>
<view class="item">顶部</view>
</view>
给盒子加点装饰
.float{
position: fixed;
right: 30rpx;
bottom:80rpx;
.item{
width:90rpx;
height: 90rpx;
background: rgba(255,255,255,0.9);
border-radius:50%;
margin-buttom: 20rpx;
display:flex;
align-items: center;
justify-content: center;
border:1px solid #eee;
}
}
做好了之后，只要分别给这两个盒子加上点击事件即可
点击刷新
刷新需要清除原来所有的图片，然后在加载新的图片
const onRefresh = function(){
pets.value = [];
//将原来的老数组全部清空
network();
//重新申请网络请求
}
返回顶部
这里我们要学习到一个组件：
//返回顶部
const onTop = ()=>{
uni.pageScrollTo({
scrollTop:0
})
}
完结撒花！❀
那么这个简单的萌宠小案例就做出来咯！
🌼那么今天就到这里吧！
▲后续会再做一个完善的具体的可发行的微信小程序项目！
一个小小的赞是对我最大的鼓励！
❤👉 想要获取源码的请点赞➕关注➕私信 👈❤
感谢你们看到这里，下次见~
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
