Vue3+vant实现京东新品效果

功能描述

1. 标题和tab吸顶效果；

2. tab切换记录滚动条高度；

3. 列表下拉刷新

效果图

代码

<template><div class="page-container" id="divContent" @scroll="KeepScrollBar()"><!-- 顶部banner --><van-sticky><div style="text-align: center; height: 30px; background-color: green; color: #fff; line-height: 30px">我是标题</div></van-sticky><van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"><van-swipe-item>1</van-swipe-item><van-swipe-item>2</van-swipe-item><van-swipe-item>3</van-swipe-item><van-swipe-item>4</van-swipe-item></van-swipe><!-- tab以及下面的列表 --><van-tabs v-model:active="active" sticky offset-top="30" swipeable @change="tabChange"><van-tab v-for="index in 4" :title="'选项 ' + index" :name="index"><van-pull-refresh v-model="loading" @refresh="onRefresh"><van-liststyle="background: #dcdcdc; padding: 10px"v-model:loading="listLoading":finished="finished"finished-text="没有更多了"@load="onLoad"><van-grid :gutter="20"><template v-for="(item, index) in list" :key="index"><van-grid-item><h1>我是商品 {{ index }} / {{ list.length }}</h1><van-image width="150px" height="100px" src="https://unpkg.com/@vant/assets/apple-3.jpeg" /></van-grid-item></template></van-grid></van-list></van-pull-refresh></van-tab></van-tabs></div>
</template><script setup lang="ts">
import { off } from 'process';
import { ref } from 'vue';const list = ref([]);
const loading = ref(false);
const listLoading = ref(false);
const finished = ref(false);const active = ref(0);
const scroll_info = {1: 0,2: 0,3: 0,4: 0,
}function onLoad() {console.log('加载一页');for (let i = 0; i < 10; i++) {list.value.push({url: 'https://unpkg.com/@vant/assets/cat.jpeg',});}listLoading.value = false;finished.value = false;
}
function onRefresh() {list.value = [];loading.value = false;onLoad();
}function tabChange (value) {// 150 是 顶部轮播的高度, 也是tab 吸顶临界点的高度.const scrollPos = scroll_info[value];const currentScrollPos =  document.getElementById('divContent').scrollTop;if (currentScrollPos > 150 || currentScrollPos === 150) {if (scrollPos > 150 || scrollPos === 150 ) {document.getElementById('divContent').scrollTop = scrollPos;} else {document.getElementById('divContent').scrollTop = 150;}}
}function KeepScrollBar () {let scrollPos;scrollPos = document.getElementById('divContent')?.scrollTop || 0;scroll_info[active.value] = scrollPos;
}
</script><style lang="less" scoped>
.page-container {width: 100vw;height: 100vh;overflow-y: scroll;
}.my-swipe .van-swipe-item {height: 150px;color: #fff;font-size: 20px;line-height: 150px;text-align: center;background-color: #39a9ed;
}
</style>

Vue3+vant实现京东新品效果相关推荐

vue3 + vant 全局的loading效果制作，写的挺好的留个底
文章链接:https://blog.csdn.net/qq_36247432/article/details/115540435
Vue3+Vant+Vue-cli+Restful api实战—图书商城移动端
Vue3+Vant+Vue-cli+Restful api实战-图书商城移动端经过将近一个月的努力,项目终于做完了,编写的时候在代码中写了很多注释,方便自己后期查看,有问题的小伙伴可以找我帮忙解决! ...
android高仿京东秒杀,Android通过实现GridView的横向滚动实现仿京东秒杀效果
实现GridView的横向滚动效果如下图: 具体实现的代码 •1. 主界面布局代码:activity_main.xml android:layout_width="fill_parent& ...
智能新物种！斐讯京东新品日：不可错过的高颜值科技美物
你心目中的智能生活是什么样的? 玩游戏时.看电影时,网速不给力总是让人神伤,如果是宽带的问题那就只能忍了,如果是无线路由器的问题那是绝对不能忍的,一台好的无线路由器就显得格外重要:运动健身时,如果手腕 ...
JS案例-仿京东放大镜效果
需要实现的效果图如下: ①布局:布局采用一个大盒子里面首先分为上下两个部分,然后下部分又分为左右两个部分.左边的盒子里面放了一个img和一个遮罩层cover,右边盒子里面放的是800*800的大图片, ...
JavaScript仿淘宝京东放大镜效果（鼠标事件）------JavaScript学习之路10
JavaScript仿淘宝京东放大镜效果注意一定计算好放大比例,本程序放大5倍,具体放大倍数,自定效果完整源码 <!DOCTYPE html> <html lang=&quo ...
JavaScript实现京东秒杀效果
这篇文章主要为大家详细介绍了JavaScript实现京东秒杀效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JavaScript实现京东秒杀效果 ...
京东新品情报局剧透OPPO K10系列或联动国漫IP带来惊喜？
4月份手机市场可以说是十分热闹,国内各大厂商都集中火力上线新品.近日,OPPO也正式官宣将于4月24日14:30举行超次元新品发布会,带来OPPO K10系列.根据OPPO官宣的信息可以得知,OPPO ...
App开发-使用Vue3+Vant组件实现历史搜索记录功能
使用Vue3+Vant组件实现App历史搜索记录功能最近在开发一款新的app项目,我自己也是第一次接触app开发,经过团队的一段时间研究调查,决定使用Vue3+Vant前端组件的模式进行开发,vue ...

Vue3+vant实现京东新品效果

功能描述

效果图

代码

Vue3+vant实现京东新品效果相关推荐

最新文章

热门文章