uview-plus中二级菜单左右联动更改为uni-app+vue3+vite写法

uview-plus3.0重磅发布,全面的Vue3移动组件库

该插件使用的vue2写法,但支持vue3引用,在此基础上修改为uni-app+vue3+vite;

<template><view class="u-wrap mainClass"><!-- <back-header :title="pageTitle" :back-text="backText"></back-header> --><view class="u-search-box"><view class="u-search-inner"><u-icon name="search" color="#909399" :size="28"></u-icon><text class="u-search-text">搜索</text></view></view><view class="u-menu-wrap"><scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop":scroll-into-view="itemId"><view v-for="(item,index) in tabbar" :key="index" class="u-tab-item":class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)"><text class="u-line-1">{{item.name}}</text></view></scroll-view><scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"@scroll="rightScroll"><view class="page-view"><view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index"><view class="item-title"><text>{{item.name}}</text></view><view class="item-container"><view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1"><image class="item-menu-image" :src="item1.icon" mode=""></image><view class="item-menu-name">{{item1.name}}</view></view></view></view></view></scroll-view></view></view>
</template>
<script lang="ts" setup>// import BackHeader from '../../../components/publicNavbar.vue';import { defineComponent, ref, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';import classifyData from '@/common/classify.data.js';const scrollTop = ref(0);const oldScrollTop = ref(0);const current = ref(0);const menuHeight = ref(0);const menuItemHeight = ref(0);const itemId = ref('');const tabbar = classifyData;const menuItemPos = ref([]);const arr = ref([]);const scrollRightTop = ref(0);let timer : NodeJS.Timeout | null = null;const pageTitle = ref('商品')const backText = ref('')const instance = getCurrentInstance();onMounted(() => {getMenuItemTop();});const swichMenu = async (index : number) => {if (arr.value.length === 0) {await getMenuItemTop();}if (index === current.value) return;scrollRightTop.value = oldScrollTop.value;// 异步更新后使用 nextTick 确保能够正确获取最新的 DOMawait new Promise<void>((resolve) => {setTimeout(() => {scrollRightTop.value = arr.value[index];current.value = index;leftMenuStatus(index);resolve();}, 0);});};const getElRect = (elClass : string, dataVal : string) => {const query = uni.createSelectorQuery().in(instance);query.select('.' + elClass).boundingClientRect((res) => {if (!res) {setTimeout(() => {getElRect(elClass, dataVal);}, 10);return;}instance.ctx[dataVal] = res.height;}).exec();};const observer = () => {tabbar.forEach((val, index) => {let observer = uni.createIntersectionObserver(this);observer.relativeTo('.right-box', { top: 0 }).observe('#item' + index, (res) => {if (res.intersectionRatio > 0) {let id = Number(res.id.substring(4));leftMenuStatus(id);}});});};const leftMenuStatus = (index : number) => {current.value = index;if (menuHeight.value == 0 || menuItemHeight.value == 0) {getElRect('menu-scroll-view', 'menuHeight');getElRect('u-tab-item', 'menuItemHeight');}scrollTop.value = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;};const getMenuItemTop = () => {let selectorQuery = uni.createSelectorQuery();selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {if (!rects.length) {setTimeout(() => {getMenuItemTop();}, 10);return;}rects.forEach((rect, index) => {arr.value.push(rect.top - rects[0].top);});}).exec();};const rightScroll = async (e : any) => {oldScrollTop.value = e.detail.scrollTop;if (arr.value.length === 0) {await getMenuItemTop();}if (timer) return;if (!menuHeight.value) {getElRect('menu-scroll-view', 'menuHeight');}setTimeout(() => {timer = null;let scrollHeight = e.detail.scrollTop + menuHeight.value / 2;for (let i = 0; i < arr.value.length; i++) {let height1 = arr.value[i];let height2 = arr.value[i + 1];if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {leftMenuStatus(i);return;}}}, 10);};onBeforeUnmount(() => {if (timer) clearTimeout(timer);});
</script><style lang="scss" scoped>.u-wrap {height: calc(100vh);/* #ifdef H5 */height: calc(100vh - var(--window-top));/* #endif */display: flex;flex-direction: column;}.u-search-box {padding: 18rpx 30rpx;}.u-menu-wrap {flex: 1;display: flex;overflow: hidden;}.u-search-inner {background-color: rgb(234, 234, 234);border-radius: 100rpx;display: flex;align-items: center;padding: 10rpx 16rpx;}.u-search-text {font-size: 26rpx;color: $u-tips-color;margin-left: 10rpx;}.u-tab-view {width: 200rpx;height: 100%;}.u-tab-item {height: 110rpx;background: #f6f6f6;box-sizing: border-box;display: flex;align-items: center;justify-content: center;font-size: 26rpx;color: #444;font-weight: 400;line-height: 1;}.u-tab-item-active {position: relative;color: #000;font-size: 30rpx;font-weight: 600;background: #fff;}.u-tab-item-active::before {content: "";position: absolute;border-left: 4px solid $u-primary;height: 32rpx;left: 0;top: 39rpx;}.u-tab-view {height: 100%;}.right-box {background-color: rgb(250, 250, 250);}.page-view {padding: 16rpx;}.class-item {margin-bottom: 30rpx;background-color: #fff;padding: 16rpx;border-radius: 8rpx;}.class-item:last-child {min-height: 100vh;}.item-title {font-size: 26rpx;color: $u-main-color;font-weight: bold;}.item-menu-name {font-weight: normal;font-size: 24rpx;color: $u-main-color;}.item-container {display: flex;flex-wrap: wrap;}.thumb-box {width: 33.333333%;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-top: 20rpx;}.item-menu-image {width: 120rpx;height: 120rpx;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/155036.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

太累了,是时候让AI数字人来帮我干活了(走,上教程)

阿酷TONY&#xff0c;原创文章&#xff0c;长沙&#xff0c;2023.11.21 关 键 词&#xff1a;AI数字人&#xff0c;生成式AI&#xff0c;智能数字分身适用场景&#xff1a;培训数字人&#xff0c;演讲授课数字人&#xff0c;直播带货数字人特别说明&#xff1a;教程用的是国内…

捷诚管理信息系统 SQL注入漏洞复现

0x01 产品简介 捷诚管理信息系统是一款功能全面&#xff0c;可以支持自营、联营到外柜租赁的管理&#xff0c;其自身带工作流管理工具&#xff0c;能够帮助企业有效的开展内部审批工作。 0x02 漏洞概述 捷诚管理信息系统CWSFinanceCommon.asmx接口存在SQL注入漏洞。未经身份认…

【UE】线框材质

一、方式1 新建一个材质&#xff0c;混合模式设置为“已遮罩”&#xff0c;勾选“双面” 勾选“线框” 然后可以随便给一个自发光颜色&#xff0c;这样最基本的线框材质就完成了 二、方式2 新建一个材质&#xff0c;混合模式设置为“已遮罩”&#xff0c;勾选“双面”&#x…

Idear 中签出git项目分支为灰色

--签出git上的项目 git clone git项目地址 --查看目录 $ dir --查看分支 $ git branch -a --签出分支 $ git checkout origin/v1.0 签出后&#xff0c;使用idear打开项目&#xff0c;项目关联git信息

flock使用文件描述符和使用文件的区别

使用带文件描述符的方法可以让你更好地控制和管理 flock 以及与锁相关的行为。当你在子进程或子shell中使用文件描述符时&#xff0c;文件锁可以跨越这些范围&#xff0c;并且只有在你显式地释放它时&#xff0c;锁才会被释放。 让我们看一个例子&#xff0c;更好地理解这一点…

uniapp中swiper 轮播带左右箭头,点击切换轮播效果demo(整理)

可以点击箭头左右切换-进行轮播 <template><view class"swiper-container"><swiper class"swiper" :current"currentIndex" :autoplay"true" interval"9000" circular indicator-dotschange"handleSw…

IPKISS Tutorials ------查看使用 _generate_elements 方法创建图形的端点坐标

IPKISS Tutorials ------查看使用 _generate_elements 方法创建图形的端点坐标 正文正文 import si_fab.all as pdk import ipkiss3.all as i3class Box(i3.PCell):class Layout(i3.LayoutView

深入了解 Bat 脚本:简单而强大的自动化工具——进阶版

&#x1f3eb;博客主页&#xff1a;魔王-T &#x1f3ef;系列专栏&#xff1a;自动化脚本工具 &#x1f95d;大鹏一日同风起 扶摇直上九万里 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前一篇文章【深入了解 Bat 脚本&#xff1a;简单而强大的自动化工具——基础版】介绍…

Atcoder ABC158

C - Tax Increase 范围足够小&#xff0c;遍历100/0.08内的整数就好 D - String Formation 设置两个数组分别代表前后加入的字符&#xff0c;reverse时交换数组 # -*- coding: utf-8 -*- # time : 2023/6/2 13:30 # file : atcoder.py # software : PyCharmimport bi…

Java语言的特点||运算符

Java语言的特点||运算符 1&#xff1a;2&#xff1a;JDK, JRE&#xff0c;JVM知识&#xff1a;3&#xff1a;注释4&#xff1a;标识符5&#xff1a; Java编译过程&#xff1a;6&#xff1a;赋值7&#xff1a;switch8:布尔表达式9&#xff1a;判定素数10&#xff1a;打印 1 - 10…

IPKISS Tutorials ------查看使用_generate_instances 方法创建图形的端点

IPKISS Tutorials ------查看使用_generate_instances 方法创建图形的端点 import si_fab.all as pdk import ipkiss3.all as i3class Box(i3.PCell):class Layout(i3.LayoutView):</

力扣题目学习笔记(OC + Swift)

训练思维&#xff0c;提高编程能力&#xff0c;不为刷题而刷题 文章目录 1. 两数之和Swift版本OC版本 2. 两数相加Swift实现OC实现 3.无重复字符的最长子串SwiftOC 4.寻找两个正序数组的中位数SwiftOC 1. 两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请…

【Linux网络】搭建内外网的网关服务器,实现DNS分离解析与DHCP自动分配

一、实验要求&#xff1a; 二、实验思路剖析&#xff1a; 网关服务器&#xff1a; 客户端准备&#xff1a; 实操&#xff1a; 第一步先安装dhcp服务和bind服务 第二步双网卡&#xff0c;配置网卡的ip地址 第三步&#xff1a;开始配置dhcp 第四步&#xff1a;做dns分离解析…

使用项目自动生成的dokcerfile第一次构建时把加载aps5.0失败无法找到加载的文件

第一次构建初始化项目自带的dockerfile,内容如下: #See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.#FROM mcr.microsoft.com/dotnet/aspnet:5.0-buster-slim AS base #WORKDIR /a…

【half done】剑指offer53:在排序数组中查找数字

力扣&#xff0c;https://leetcode.cn/problems/zai-pai-xu-shu-zu-zhong-cha-zhao-shu-zi-lcof/description/ 二分查找&#xff0c;边界问题 solution1 自己的方法&#xff0c;其实不太好 class Solution {public int countTarget(int[] scores, int target) {if (scores.l…

单线圈无刷直流电机的电机驱动器芯片GC1298R/S,可替代EUM6898/德信,应用于车用信息娱,HUD 投影仪调整等产品中

GC1298R/S 是单线圈无刷直流电机的电机驱动器。它具有高效的直接 PWM控制方式&#xff0c; 它可以控制无刷直流电机转速。它集成了最低速 度限制模式、可调速度斜率控制模式、软启动模 式、风扇转速计、锁保护、自动重启、TSD、OCP 和噪声控制模式&#xff0c;噪声控制模式根据…

使用持久卷部署 WordPress 和 MySQL

&#x1f5d3;️实验环境 OS名称Microsoft Windows 11 家庭中文版系统类型x64-based PCDocker版本Docker version 24.0.6, build ed223bcminikube版本v1.32.0 &#x1f587;️创建 kustomization.yaml 你可以通过 kustomization.yaml 中的生成器创建一个 Secret存储密码或密…

python 迭代器

可迭代对象 可以直接作用于for循环的对象统称为可迭代对象 &#xff08;iterable&#xff09;。可以用isinstance()去判断一个对象是否是iterable对象。 数据类型 可以直接作用于for循环的数据类型一般分为两种 1.集合数据类型&#xff0c;如list、tuple、dict、set、strin…

使用Arrays.asList与不使用的区别

在写算法的时候&#xff0c;遇到了有的题解使用的是Arrays.asList&#xff0c;也有的是直接新建一个List集合将元素加进去的。 看了一下算法的时间&#xff0c;两者居然相差了9秒。 算法原地址&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长…

类和对象学习笔记

类和对象 类的定义this指针类的6个默认成员函数构造函数析构函数拷贝构造函数赋值运算符重载赋值运算符重载运算符重载const成员 取地址操作符重载const取地址操作符重载 初始化列表explicit关键字static成员匿名对象友元内部类拷贝对象时编译器的优化 类的定义 c类的定义形式…