uni-app项目实战笔记22--图片预览和切换

需求描述:

1、图片预览时,通常需要知道,当前预览的是第几张,总共有多少张图片;

2、当用户左右滑动切换预览图片时,当前预览索引需要随着进行切换。

下面简单介绍下实现过程:

1、在图片列表页点击预览图片时,把图片Id作为参数传递过去

javascript 复制代码
<navigator :url="'/pages/preview/preview?id='+item._id" class="item" v-for="item in classifyList" :key="item._id">

2、在预览详情页获取传递过来的id,通过前面的学习可知,可使用onLoad函数获取

javascript 复制代码
//分页图片列表,前面笔记有记录怎么获取,这里略
const classList = ref([])
//当前图片的id
const currentId = ref(null)
//当前图片的索引,默认为第1张
const currentIndex = ref(0)
//使用onLoad函数,通过id获取当前索引
//如果当前id等于分类列表指定项的id,则该项的索引则为当前图片的索引
onLoad((e)=>{
	currentId.value = e.id
	currentIndex.value = classList.value.findIndex(item=>item._id == currentId.value)
	console.log("index:"+currentIndex)
})

在模板层使用上面代码获取到的索引,由于索引从0开始,当前查看是第几张图片则需要索引加1,预览总数为分类列表数组的长度

html 复制代码
<view class="count">{{currentIndex+1}} / {{classList.length}} </view>

最后再来实现图片切换时,索引页的切换

html 复制代码
<swiper circular :current="currentIndex" @change="swiperChange">

在swiper中当前图片所在的索引即为上面JS获得的currentIndex,当滑动图片时,通过change事件来改变当前索引

javascript 复制代码
const swiperChange =(e) =>{
	currentIndex.value = e.detail.current;
}
相关推荐
孞㐑¥1 小时前
Linux之Socket 编程 UDP
linux·服务器·c++·经验分享·笔记·网络协议·udp
某公司摸鱼前端2 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
sealaugh324 小时前
aws(学习笔记第四十八课) appsync-graphql-dynamodb
笔记·学习·aws
遗憾随她而去.5 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
freexyn6 小时前
Matlab自学笔记六十一:快速上手解方程
数据结构·笔记·matlab
很小心的小新7 小时前
12、jvm运行期优化
java·开发语言·jvm·笔记
寻丶幽风9 小时前
论文阅读笔记——NoPoSplat
论文阅读·笔记·三维重建·3dgs·相机位姿·dustr
牧杉-惊蛰9 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
西岭千秋雪_11 小时前
Redis缓存架构实战
java·redis·笔记·学习·缓存·架构
XvnNing11 小时前
【Verilog硬件语言学习笔记4】FPGA串口通信
笔记·学习·fpga开发