uni-app+ts----微信小程序锚点定位 、自动吸顶、滚动自动选择对应的锚点(点击tab跳转对应的元素位置)

uni-app----微信小程序锚点定位 、自动吸顶、滚动自动选择对应的锚点(点击tab跳转对应的元素位置)

  1. html代码部分 重点是给元素加入【 :id=“‘item’ + item.id”】
 <view class="radiusz bg-white pt-[30rpx] z-[999]"><u-tabs:list="list":current="current"@change="tabChange"bg-color="transparent":active-color="mainColor":bar-width="90"font-size="24":gutter="26"></u-tabs></view><viewclass="px-[20rpx] py-[20rpx] w-full bg-white mb-[30rpx] box-border"v-for="item in list":key="item.id"><view class="text-center" :id="'item' + item.id"><text class="pr-[10rpx]">———</text>{{ item.name}}<text class="pl-[10rpx]">———</text></view><view class="mt-[40rpx]"><u-parse :html="item.content"></u-parse></view><view class="mt-[40rpx]"><apply-btn :customClass="customClass" btnText="加盟申请"></apply-btn></view></view>

2.JS代码部分

import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() as any
const customClass = ref('m-auto') //按钮样式
const current = ref(0) // tab默认索引/*** @description: 滚动到对应的位置 uni-app锚点定位 、自动吸顶、滚动自动选择对应的锚点* @param {*} index:tab选中的索引* @return {*}*/
const pageScroll = (index: number) => {nextTick(() => {const id = list.value[index].idconst query = proxy.createSelectorQuery()query.select('#item' + id).boundingClientRect((data: Record<string, any>) => {const query1 = proxy.createSelectorQuery() //需要定义一个新的query1.select('.boxz').boundingClientRect((res: Record<string, any>) => {const scrollTop = data.top - res.top // 获取差值const skewY = 80 // 偏移高度// 页面开始进行滚动到目标位置uni.pageScrollTo({scrollTop: scrollTop > 0 ? scrollTop - skewY : scrollTop + skewY,duration: 300,complete: function () {console.log('滚动完成')}})}).exec()}).exec()})
}/*** @description: 点击tab选项* @param {*} index :选中的索引* @return {*}*/
const tabChange = (index: number) => {current.value = indexpageScroll(index)
}

在这里插入图片描述

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

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

相关文章

INFINI Labs 产品更新 | 修复 Easysearch 跨集群复制索引同步问题,Gateway 内存异常增长等问题

INFINI Labs 产品又更新啦~&#xff0c;本次更新主要对 Easysearch、Gateway、Console、Agent 等产品功能进行优化和相关 Bug 修复&#xff0c;解决了内存异常增长等问题&#xff0c;以下是详细说明。 INFINI Easysearch v1.6.2 INFINI Easysearch 是一个分布式的近实时搜索与…

下载的ros工程如何运行,ros项目运行方法

举例: 节点: 重要的步骤已经标黑,然后如果是节点的话,就运行rosrun 文件名,文件名相关,用tab按键补全即可。 Create folder "catkin_ws/src" somewhereGo the new created folder, into src foldergit clone https://github.com/IaroslavS/listen_to_topic_an…

pywin32后台键鼠

1 后台键鼠操作 组合键不生效&#xff0c;并且按键按下会触发两次&#xff0c;不知道为什么&#xff1f;有大佬知道了&#xff0c;请指教一下&#xff01; import time import win32api import win32con import win32guiclass VirtualKeyboard:def __init__(self, hwnd):self…

机器学习---EM算法

1. 极大似然估计与EM算法 极大似然估计是一种常用的参数估计方法&#xff0c;它是以观测值出现的概率最大作为准则。关于极 大似然估计&#xff0c;假设现在已经取到样本值了&#xff0c;这表明取到这一样本的概率L(θ) 比较 大。我们自然不会考虑那些不能使样本出现的θ作为…

计算机基础知识62

模型层回顾&#xff1a;基本使用 # 模型层有orm框架&#xff1a;对象关系映射 数据库中&#xff1a;一个个表 &#xff1a;user表&#xff0c;book表&#xff0c;一条条的记录 程序中&#xff1a;一个个类&#xff0c;一个个对象 数据库中一张表---->程序中一个…

【超详细】vue项目:Tinymce富文本使用教程以及踩坑总结+功能扩展

【【超详细】vue项目&#xff1a;Tinymce富文本使用教程以及踩坑总结功能扩展 引言&#xff1a;一、 开始二、快速开始1、安装Tinymce 三、封装成Vue组件1、文件结构2、index.vue3、dynamicLoadScript.js4、plugin.js5、toolbar.js 四、使用Tinymce组件五、业务逻辑实现1、添加…

对外汉语教师简历(精选12篇)

以对外汉语老师招聘需求为背景&#xff0c;我们制作了1份全面、专业且具有参考价值的简历案例&#xff0c;大家可以灵活借鉴&#xff0c;希望能帮助大家在众多候选人中脱颖而出。 对外汉语教师简历下载&#xff08;在线制作&#xff09;&#xff1a;百度幻主简历或huanzhucv.c…

Promise的resolve和reject方法(手写题)

1.resolve 2.reject 3.手写 1.resolve //构造函数上添加 resolve 方法 Promise.resolve function (value) {return new Promise((resolve, reject) > {if (value instanceof Promise) {value.then((val) > {resolve(val)},(err) > {reject(err)})} else {resolve(v…

Google Analytics(谷歌分析)是什么以及如何使用

Google Analytics&#xff08;谷歌分析&#xff09;是由Google提供的一款网络分析服务。该服务旨在帮助网站和应用程序的所有者更好地了解其用户的行为和交互&#xff0c;从而优化网站或应用的性能、用户体验和营销策略。Google Analytics 提供了丰富的数据和报告&#xff0c;涵…

IP地址十进制与二进制的转换

一、IPv4 十进制->二进制 def get_bin_v4(prefix):ip prefix.split(/)[0]mask prefix.split(/)[1]bin_all (.join([bin(int(x) 256)[3:] for x in ip.split(.)]))return bin_allprefix_v4 192.168.1.0/24 bin_mask_1 get_bin_v4(prefix_v4) print(bin_mask_1)输出如…

【Python表白系列】这个情人节送她一个漂浮的爱心吧(完整代码)

文章目录 漂浮的爱心环境需求完整代码详细分析系列文章 漂浮的爱心 环境需求 python3.11.4PyCharm Community Edition 2023.2.5pyinstaller6.2.0&#xff08;可选&#xff0c;这个库用于打包&#xff0c;使程序没有python环境也可以运行&#xff0c;如果想发给好朋友的话需要这…

21.Python 操作文件

目录 1. 认识文件和I/O2. 打开文件在异常处理语句中打开在上下文管理中打开 3.读取文件3. 写入文件4. 删除文件5. 复制文件6. 重命名文件7. 文件查找和替换 1. 认识文件和I/O 文件是存储在设备上的一组字符或字节序列&#xff0c;可以包含任何内容&#xff0c;它是数据的集合和…

SQL中left join、right join、inner join等的区别

一张图可以简洁明了的理解出left join、right join、join、inner join的区别&#xff1a; 1、left join 就是“左连接”&#xff0c;表1左连接表2&#xff0c;以左为主&#xff0c;表示以表1为主&#xff0c;关联上表2的数据&#xff0c;查出来的结果显示左边的所有数据&#…

【自动化测试】Selenium IDE脚本编辑与操作(了解)

之前&#xff0c;我们录制脚本时是录制鼠标和键盘的所有在浏览器的操作&#xff0c;那么脚本会出现多余的步骤&#xff0c;有时候我们需要手动填写脚本或修改脚本&#xff0c;所以我们有必要对selenium IDE脚本编辑与操作有所了解&#xff1b;&#xff08;采用录制的方式很容易…

k8s学习

文章目录 前言一、k8s部署方式二、学习k8s的方式今天主要配置k8s环境的方式今天遇到的是一个在k8s进行初始化的方式&#xff0c;但是发现k8s不能正常初始化总是出现错误&#xff0c;或者在错误中有问题的方式&#xff0c;在网上查询挺多资料需要重新启动kub文件&#xff0c;删除…

jdk8、jdk9中,接口的新特性

接口的老特性&#xff1a; 没有构造方法成员变量只能定义常量&#xff0c;默认三个关键字public static final只能是抽象方法&#xff0c;默认两个关键字public abstract 接口的新特性&#xff1a; jdk8 1.接口允许定义非抽象方法&#xff0c;需加入default关键字。为了解决…

Java+SSM+MySQL基于微信小程序的商城购物小程序(附源码 调试 文档)

基于微信小程序的商城购物小程序 一、引言二、国内外研究现状三、系统设计四、系统实现五、测试与评估六、结论七、界面展示八、源码获取 摘要&#xff1a; 本文介绍了一种基于微信小程序的商城购物小程序&#xff0c;该系统分为管理员和用户两种用户角色。管理员可以通过系统进…

流量内存cpu使用率使用工具

类似360工具球的工具 我提供了夸克下载喜欢的朋友可以直接下载使用 我用夸克网盘分享了「TrafficMonitor」&#xff0c;点击链接即可保存。打开「夸克APP」&#xff0c;无需下载在线播放视频&#xff0c;畅享原画5倍速&#xff0c;支持电视投屏。 链接&#xff1a;https://pan…

(详细教程)笔记本电脑安装Ubuntu系统

1.前言 老的小米笔记本淘汰了&#xff0c;装一下linux系统玩一下。 使用工具如下&#xff1a;一台小米笔记本pro15.6一个惠普32G U盘一个台式机用于下载镜像等资源 2.下载Ubuntu桌面版 cn.ubuntu.com/download/de… 这里我下载的是 22.04.3 LTS 3.下载烧录工具&#xff0c…

前端面试高频考点—TCP vs UDP

目录 简介&#xff1a; 区别&#xff1a; 应用选择&#xff1a; tcp为什么需要三次握手&#xff1f; 简介&#xff1a; TCP(传输控制协议)和UDP&#xff08;用户数据报协议&#xff09; TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议&#xff0c;是专门为了在不…