uniapp中swiper上下滑动组件滑动时实现文字移动？

来源：蜘蛛抓取(WebSpider) 时间：2023-03-13 10:58 标签： swiper上下滑动

选择擅长的领域继续答题？{@each tagList as item}
${item.tagName}
{@/each}手机回答更方便，互动更有趣，下载APP
提交成功是否继续回答问题？手机回答更方便，互动更有趣，下载APP
展开全部
实现图片懒加载，并且显示数组中，始终只有3张图片，上下滑动增加的同时，删除最开始的那一张。可以指定从总图片的第几张开始加载 。
要实现上下滑动时的动画效果，我这里用到是uni-app自带swiper组件。同时为了解决增加或删除数组时，会重新渲染，导致动画效果未完成，所以用的是animationfinish页面加载后触发的事件
要实现上下滑动时，动画执行完毕之后，要把执行后的那张图片，始终保持在中间位置。此处，就用到了serper组件中的current，当滑倒第3或者第1张时，给current赋值，使显示的图片始终在第二张的位置。同时滑动添加的同时，也要删除掉最开始的那一张
当总图片数组索引位为0时，则定位到第一张图片。当总图片数组索引位>0时，则定位到第二张图片
通过swiper组件current，可以得到当前页面索引值，减去未滑动前的页面索引值。大于0则是向下滑动，小于0则是向上滑动。
判断当前页面图片是中间的那一张,并且总数组长度大于页面索引值+1时，加载第四张图片。
setTimeout是为了保证删除时，数组是已经添加进去了的
this.atPresentNode.swiperIndex = 1 保证滑动后的图片始终在中间位置
判断滑动之后是否在第一张的位置，并且 总索引位大于0
此处先删除后添加是由于先在头部添加时，会改变显示图片相对于数组的位置，显示图片的位置就向下延后了一位。所以为了避免这种情况，故而先删除，再添加到头部
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
下载百度知道APP，抢鲜体验使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。扫描二维码下载
×个人、企业类侵权投诉
违法有害信息,请在下方选择后提交
类别
色情低俗
涉嫌违法犯罪
时政信息不实
垃圾广告
低质灌水
我们会通过消息、邮箱等方式尽快将举报结果通知您。
说明
做任务开宝箱
累计完成
0
个任务
10任务
50任务
100任务
200任务
任务列表加载中...

我要回帖

更多关于 swiper上下滑动 的文章

 

随机推荐