<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:简单实现了虚拟列表;

商户如何申请连续包月服务？类似购买爱奇艺会员-连续包月

使用广点通推广小程序 因为要搞那个自归因 从广点通进入小程序的时候会带一些什么click_id参数 怎么跳转到体验版或开发版进行联调啊？

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

小程序中如何做到一键加入群聊？

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

URL Scheme和URL Link有什么区别？

为什么点聚合后 marker的点击事件不触发啊？

自定义气泡的时候 cover-view里面嵌套一个图标和一个标题 在ios真机显示不正常 两个只会显示其中一个 要不显示图标要不显示标题 这是什么阴间bug？

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