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

效果
在这里插入图片描述

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,一经查实,立即删除!

相关文章

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

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

JVM、Redis、反射

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

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

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…

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

本文整理自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…

数学建模学习(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;训练了识别无人机的…

【计算机网络】网络层协议 -- IP协议

文章目录 1. 网络层做了什么事2. IP协议的简介3. IP协议格式4. 分片与组装5. 网段划分6. 特殊的IP地址7. IP地址的数量限制8. 私网IP地址和公网IP地址9. 路由 1. 网络层做了什么事 保证数据可靠地从一台主机到另一台主机 当双方在进行基于TCP的网络通信时&#xff0c;要保证将数…

HCIP OSPF链路状态类型总结

OSPF的LSA OSPF是典型的链路状态路由协议&#xff0c;使用LAS&#xff08;链路状态通告&#xff09;来承载链路状态信息。LSA是OSPF的一个核心内容&#xff0c;如果没有LSA&#xff0c;OSPF 是无法描述网络的拓扑结构及网段信息的&#xff0c;也无法传递路由信息&#xff0c;更…

hbuilderx主题色分享-github风格

效果 步骤 hbuilderx总共有三种主题&#xff0c;绿柔主题Default,酷黑主题Monokai,雅黑主题Atom One Dark,修改主题色是基于三种主题之一的&#xff0c;不能直接创建一个新主题&#xff0c;比如下方配置是基于Atom One Dark(对象名为[Atom One Dark])&#xff0c;则当前hbuild…

Profinet转EtherNet/IP网关连接AB PLC的应用案例

西门子S7-1500 PLC&#xff08;profinet&#xff09;与AB PLC以太网通讯&#xff08;EtherNet/IP&#xff09;。本文主要介绍捷米特JM-EIP-PN的Profinet转EtherNet/IP网关&#xff0c;连接西门子S7-1500 PLC与AB PLC 通讯的配置过程&#xff0c;供大家参考。 1, 新建工程&…

06-MySQL-基础篇-SQL之DCL语句

SQL之DCL语句 前言DCL 管理用户查询用户创建用户修改用户密码删除用户说明 权限控制常见权限描述查询权限授予权限撤销权限说明 前言 本篇来学习下SQL中的DCL语句 DCL DCL英文全称是Data Control Language(数据控制语言)&#xff0c;用来管理数据库用户、控制数据库的访问权…

有哪些类似bootstrap的纯css框架?

前言 下面是一些类似bootstrap的css框架&#xff0c;以及其开源的仓库和网址附上&#xff0c;整理不易&#xff0c;希望多多点一下赞同收藏喜欢哈~ 1、Tailwind Star&#xff1a;70.5k Tailwind CSS 是一个实用的工具集&#xff0c;用于快速构建现代化的自定义用户界面。它提…

7、单元测试--测试RestFul 接口

单元测试–测试RestFul 接口 – 测试用例类使用SpringBootTest(webEnvironment WebEnvironment.RANDOM_PORT)修饰。 – 测试用例类会接收容器依赖注入TestRestTemplate这个实例变量。 – 测试方法可通过TestRestTemplate来调用RESTful接口的方法。 测试用例应该定义在和被测…