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;
}
相关推荐
paopaokaka_luck37 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
前端程序猿-秦祥41 分钟前
uniapp拦截返回事件
uni-app
UQWRJ1 小时前
菜鸟教程R语言一二章阅读笔记
开发语言·笔记·r语言
YGY Webgis糕手之路4 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
雪芽蓝域zzs4 小时前
uniapp input 如何只读禁用输入可点击
uni-app
遇见尚硅谷5 小时前
C语言:*p++与p++有何区别
c语言·开发语言·笔记·学习·算法
老虎06276 小时前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
xw56 小时前
uni-app项目跑APP报useStore报错
前端·uni-app
!win !6 小时前
uni-app项目跑APP报useStore报错
前端·uni-app
YGY Webgis糕手之路9 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web