<template> <div :class="$style['content-box']"> <swiper :class="$style['swiper-box']" :vertical="true" :circular="false" @change="handleSwiperChange" @animationFinish="handleAnimationFinish" > <swiper-item :item-id="item.id" v-for="item in sliceList" :key="item.id" :class="$style['swiper-item']" > <div :style="{background:item.color}" :class="$style['item-block']"> {{ item.id }} <p></p> 当前是第几个：{{ item.index }} </div> </swiper-item> </swiper> <p :class="$style['bottom-tips']">数据加载中</p> </div> </template> <script setup> import {ref,onMounted,computed} from "vue"; import {uuid} from "@/utils/util"; const swiperList = ref([]); const startIndex = ref(0); const endIndex = ref(2); const sliceList = ref([]); const isFetchLoading = ref(false); onMounted(()=>{ swiperList.value.push(...mockList()); sliceList.value = swiperList.value.slice(startIndex.value,endIndex.value+1); }) function handleSwiperChange($event){ } function handleAnimationFinish($event){ console.log($event,'$event') let {current,currentItemId} = $event.detail; let currentIndex = swiperList.value.findIndex((item)=>item.id == currentItemId); console.log(currentIndex,'修正') let diffAfter = swiperList.value.length - 1 - currentIndex; startIndex.value = currentIndex - 1<0?0:currentIndex - 1; endIndex.value = currentIndex+1<2?2:currentIndex+1; sliceList.value = swiperList.value.slice(startIndex.value,endIndex.value+1); console.log(startIndex.value,endIndex.value,'diffAfter',sliceList.value); // 当尾部数据小于1条的时候 从服务端请求数据 if(diffAfter <= 1&&!isFetchLoading.value){ isFetchLoading.value = true; setTimeout(()=>{ swiperList.value.push(...mockList()); isFetchLoading.value = false; },2000); } } // 模拟请求数据 3 012 345 function mockList(){ let list = []; for(let i = 0;i<3;i++){ list.push({ id:uuid(), color:color16(), index:swiperList.value.length+i, }) } return list; } // 随机生成颜色值 function color16(){ let r = Math.floor(Math.random()*256); let g = Math.floor(Math.random()*256); let b = Math.floor(Math.random()*256); let color = '#'+r.toString(16)+g.toString(16)+b.toString(16); return color; } </script> <style module lang="scss"> .content-box{ height: 100vh; } .swiper-box,.swiper-item,.swiper-item-box{ height: 100%; position: relative; } .item-block{ color: #fff; height: 100%; padding-top: 600px; box-sizing: border-box; text-align: center; } .bottom-tips{ position: fixed; z-index: -1; left: 0; bottom: 0; right: 0; height: 100px; line-height: 100px; background: rgb(73, 73, 196); text-align: center; color: #fff; } </style> 1:大概简单实现了一下视频上下滑动效果; 2:简单实现了滑动到尾部的时候加载更多数据; 3:简单实现了虚拟列表;

从h5跳转到小程序 使用url link 然后用window.location.href = "url link"跳转到小程序 在外部浏览器是不报错的 在微信内部打开这个h5 然后点击按钮跳转 虽然可以成功跳转到小程序 但是会有一个toast报错 network error 这是为什么？

前后台背景音乐播放器播放onEnded的时候 为什么会清除掉src这些信息 获取src根本获取不到 赋值也赋值不上去 什么阴间bug？

map组件中自定义的marker样式可以结合点聚合实现聚合功能吗？

页面内有一个地图功能 地图上有一些markers标记点 然后把这个地图功能抽出去封装为了一个子组件。 你在页面的onShow中请求数据会导致某些机型标记点不显示，但是通过真机调试工具看到这些markers已经加载到了dom结构中，但是就是不显示。 你需要加延迟请求这个接口 感觉像是需要地图先渲染完成 然后你在请求接口进行markers渲染赋值，请问这个是为什么？真坑啊！！

a页面打开b页面 b页面switchTab到首页 在首页停留一会 页面会莫名其妙闪烁一下返回到b页面 这是什么情况？

[图片]