vue3+vant3使用van

2023-08-19 13:51| 来源: 网络整理| 查看: 265

先看一下效果图：

主要解决的问题是当菜单顶部有van-sticky粘性布局时，左右联动准确定位如何实现

页面结构：

...省略，这部分高度固定约140px {{item.clsdesc}}

js部分：主要在于handleMenulist()及handleScroll()的实现

import { ref, reactive, toRefs, onMounted} from 'vue' export default { name: 'menu', components: { }, setup() { const router = useRouter() const tabValue = ref(0) const state = reactive({ menuList: [], }) onMounted(() => { //...省略从后台接口获取menuList数据过程 // 监听滚动条位置 window.addEventListener('scroll', handleScroll, true) }) //左侧菜单点击联动左侧 const handleMenulist=(index)=>{ tabValue.value = index let navPage = document.querySelector('#scroll' + index) //navPage.offsetTop需要减去165店铺头部所占高度，需{ //scrollTop从0开始增大，局限在#goodListId div内 let scrollTop = document.querySelector("#goodListId").scrollTop for(let a = 0;a

【本文地址】

公司简介

联系我们