小程序原生实现左右锚点联动

效果
在这里插入图片描述

wxml

<view class='box'><scroll-view scroll-y scroll-with-animation style="width:25%"><view class='nav'><view wx:for="{{navList}}" wx:key='index' class="title {{index == active ?'select':''}}"data-index='{{index}}' bindtap='activeNav'>{{item}}</view></view></scroll-view><scroll-view scroll-y style="width:75%" scroll-with-animation scroll-into-view="{{selectId}}"bindscroll="watchScroll"><view class='content'><view id='{{"item"+index}}' class='subtitle' wx:for="{{navList}}" wx:key='index'>{{item}}</view></view></scroll-view>
</view>

css

.box {display: flex;
}
.nav {height: 100%;width: 100%;background: #F5F5F5;box-sizing: border-box;flex-wrap: wrap;
}.title {box-sizing: border-box;width: 100%;padding: 32rpx;font-size: 28rpx;
}.select {background: #fff;border-left: 5rpx solid #eec718;box-sizing: border-box;
}.content {padding: 0 30rpx;box-sizing: border-box;width: 100%;height: 100vh;
}.subtitle {width: 100%;height: 650rpx;border-bottom: 10rpx #f5f5f5 solid;
}

js

Page({data: {heightArr: [],distance: 0,active: 0,selectId: "item0",navList: ['全部甜品', '今日甜品系列', '毛巾卷系列', '切块系列', '限时限量系列', '提拉米苏系列']},onLoad: function (options) {this.selectHeight();},// 选择左侧标签锚点定位activeNav(e) {var index = e.currentTarget.dataset.indexthis.setData({active: index,selectId: "item" + index})},//计算右侧每个锚点的高度selectHeight() {var list = []var height = 0;const query = wx.createSelectorQuery();query.selectAll('.subtitle').boundingClientRect()query.exec((res) => {res[0].forEach((item) => {height += item.height;list.push(height)})this.data.heightArr = list})},//监听scroll-view的滚动事件watchScroll(e) {let scrollTop = e.detail.scrollTop; //获取距离顶部的距离let active = this.data.active;if (scrollTop >= this.data.distance) {if (active + 1 < this.data.heightArr.length && scrollTop >= this.data.heightArr[active]) {this.setData({active: active + 1})}} else {if (active - 1 >= 0 && scrollTop < this.data.heightArr[active - 1]) {this.setData({active: active - 1})}}this.data.distance = scrollTop;}
})

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

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

相关文章

面试题 - 设计模式

文章目录 一、设计模式的六大原则二、 设计模式有哪些&#xff0c;简要叙述&#xff1f;三、MVC的理解四、代理委托模式五、观察者模式1. KVO原理&#xff1a;2. KVO的详细流程3. 如何手动触发KVO&#xff1a;4. swift的kvo&#xff1a; 六、工厂模式七、单例模式八. KVC实现原…

html滚动下滑分页

手机端网页滑动触发分页 window.addEventListener(scroll, handleScroll);var page 1;function handleScroll(arg) {var clientHeight document.documentElement.clientHeight;//客户区高度var scrollHeight document.documentElement.scrollHeight;//没滚动下原内容高度var…

Windows下安装Hive(包安装成功)

Windows下安装Hive Hive与Hadoop的版本选择很关键&#xff0c;千万不能选错&#xff0c;否则各种报错。一、Hive下载1.1、官网下载Hive1.2、网盘下载Hive 二、解压安装包&#xff0c;配置Hive环境变量2.1、环境变量新增&#xff1a;HIVE_HOME2.2、修改Path环境变量&#xff0c;…

js实现push重复的数组拿到最新的数据

2023.8.1今天我学习了如何使用js把重复push的数组只取最新的。 如&#xff1a;当我们使用input方法需要对数据进行叠加的时候可能会对同一条数据进行多次操作。 如&#xff1a; data:[ {id:1,name:张三},{id:2,name:李四},{id:1,name:张三三} ] 通过这个数组我们会发现id为…

JVM、Redis、反射

JVM JVM是Java virtual machine&#xff08;Java虚拟机&#xff09;的缩写&#xff0c;是一种用于计算机的规范&#xff0c;是通过在实际计算机上仿真模拟各种计算机功能来实现的。 主要组件构成&#xff1a; 1.类加载器 子系统负责从文件系统或者网络中加载Class文件&…

Git 和 Git Book 学习笔记

Git 在线学习命令&#xff1a; https://learngitbranching.js.org/ 特点 LearnGitBranching 通过可视化动画效果来帮助开发人员理解Git命令&#xff0c;并且配有游戏闯关功能来一步一步学习Git命令。 开发人员可以在LearnGitBranching提供的沙盒里面执行相关的Git命令。 安…

深度学习实战 | 开发一个围棋智能体

01、数据模型 神经网络的训练过程需要将HD5文件中的样本数据解析出来。数据集中的棋盘局面可以提取后直接输入卷积网络进行特征提取。从属性中取出样本标签用于神经网络的损失计算和反向传播。如图1所示&#xff0c;落子方信息从属性中提取后不用参与棋盘局面的特征提取&#…

Spire.Office for.NET Crack

Spire.Office for.NET Crack Spire.Office for.NET是E-iceblue提供的企业级Office.NET API的组合。它包括Spire.Doc、Spire.XLS、Spire.Seadsheet、Spire.Presentation、Spire_PDF、Spire.DataExport、SpireOfficeViewer、Spire-PDFViewer、Spire.DocViewer、Spire.Barcode和Sp…

在linux中怎样同时运行三个微服务保证退出时不会终止

前言 1.maven中打jar包 使用插件打包,必须在pom.xml中添加插件,否则不能在linux中编译运行 <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version&g…

AMEYA详解松下Panasonic HF SSOP 1 Form A AQY PhotoMOS继电器

Panasonic HF SSOP 1 Form A AQY PhotoMOS继电器采用微型SSOP封装&#xff0c;具有600V的负载电压和1500Vrms 的I/O隔离电压 这些继电器具有8Ω的低导通电阻和高速运行的特点&#xff0c;SSOP封装旨在实现高密度安装。Panasonic HF SSOP AQY PhotoMOS继电器适用于从测试和测量设…

postman和jmeter的区别何在?

小伙伴们大家好呀&#xff0c;前段时间笔者做了一个小调查&#xff0c;发现软件测试行业做功能测试和接口测试的人相对比较多。在测试工作中&#xff0c;有高手&#xff0c;自然也会有小白&#xff0c;但有一点我们无法否认&#xff0c;就是每一个高手都是从小白开始的&#xf…

vue : 无法加载文件 C:\Users\86182\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。

windows11&#xff1a; PS E:\VueProjects> vue vue : 无法加载文件 C:\Users\86182\AppData\Roaming\npm\vue.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 https:/ go.microsoft.com/fwlink/?LinkID135170 中的 about_Execution_Policie…

柴洪峰院士:大模型赋能金融科技思考与展望

本文整理自7月7日世界人工智能大会“AI生成与垂直大语言模型的无限魅力”论坛上中国工程院院士、复旦大学金融科技研究院院长柴洪峰《大模型赋能金融科技思考与展望》的主题分享&#xff0c;从金融垂直模型构建、金融知识图谱与大模型融合以及金融大模型的监管三个方面进行介绍…

Mycat-Balance使用指南

MyCAT Balance是一个Java NIO的高性能负载均衡器&#xff0c;可以替代普通的硬件的交换机或其LVS类似的复杂机制&#xff0c;实现MyCAT集群的负载均衡。 MyCAT Balance的配置文件在conf目录下&#xff0c;frontend-conf.为前端配置&#xff0c;包括绑定的端口等&#xff0c;js…

uniapp 小程序实时且持续获取定位信息(全局设置一次)(单页面监听定位改变)(不采用定时器)

本篇文章实现了uniapp 微信小程序实时获取定位信息,小程序打开即可持续获取定位信息, 位置更新也会触发相关自定义事件 优点 只设置一次不采用定时器的方式无需多个页面调用单独页面若想获取当前位置是否变化 可单独设置监听,并调用不同逻辑事件 原理: 采用uniapp推出的: un…

消息队列之六脉神剑:RabbitMQ、Kafka、ActiveMQ 、Redis、 ZeroMQ、Apache Pulsar对比和如何使用

目录 1. RabbitMQ2. Kafka3. ActiveMQ4. Redis5. ZeroMQ6. Apache Pulsar 消息队列&#xff08;Message Queue&#xff09;是一种异步通信机制&#xff0c;它将消息发送者和接收者解耦&#xff0c;从而提高了应用程序的性能、可扩展性和可靠性。在分布式系统中&#xff0c;消息…

数学建模学习(7):Matlab绘图

一、二维图像绘制 1.绘制曲线图 最基础的二维图形绘制方法&#xff1a;plot -plot命令自动打开一个图形窗口Figure&#xff1b; 用直线连接相邻两数据点来绘制图形 -根据图形坐标大小自动缩扩坐标轴&#xff0c;将数据标尺及单位标注自动加到两个坐标轴上&#xff0c;可自定…

亚马逊云科技HPC解决方案,帮助浙江大学实现成本和科研任务的双丰收

浙江大学土壤学科是朱祖祥院士等几代土壤科学家共同创建的A国家重点学科&#xff0c;整体实力雄厚&#xff0c;优势特色明显&#xff0c;总体水平居国内前列。在亚马逊云科技科研创新支持计划&#xff08;Amazon Web Services Cloud Credits for Research&#xff09;的多次支持…

yolov8系列[五]-项目实战-yolov8模型无人机检测

yolov8系列[五]-项目实战-yolov8模型无人机检测 项目介绍项目展示功能简介代码结构如何启动 开发者模式1. 安装依赖环境2. 启动程序 源代码下载其他 项目介绍 无人机识别项目,无人机搭载nvidia jetson边缘计算板子,进行实时识别。使用yolov8算法&#xff0c;训练了识别无人机的…

QEMU源码全解析23 —— QOM介绍(12)

接前一篇文章&#xff1a;QEMU源码全解析22 —— QOM介绍&#xff08;11&#xff09; 本文内容参考&#xff1a; 《趣谈Linux操作系统》 —— 刘超&#xff0c;极客时间 《QEMU/KVM》源码解析与应用 —— 李强&#xff0c;机械工业出版社 特此致谢&#xff01; 上一回分析了…