微信小程序锚点选择导航栏
时间:2022-07-24
本文章向大家介绍微信小程序锚点选择导航栏,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<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>
.box {
display: flex;
}
.nav {
height: 100vh;
width: 100%;
background: #F5F5F5;
display: flex;
flex-direction: column;
}
.title {
width: 100%;
height: 120rpx;
line-height: 120rpx;
text-align: center;
}
.select {
background: #fff;
border-left: 5rpx solid #16BA98;
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;
}
Page({
data: {
heightArr: [],
distance: 0,
active: 0,
selectId: "item0",
navList: ['语文', '数学', '英语', '历史', '体育', '音乐']
},
onLoad: function (options) {
this.selectHeight();
},
// 选择左侧标签锚点定位
activeNav(e) {
var index = e.currentTarget.dataset.index
this.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;
}
})
- OC学习14——谓词
- 如何在32位系统中使用ROP+Return-to-dl来绕过ASLR+DEP
- 如何使用Twitter构建C;C服务器
- 【Python语言】Scikit-learn 快速入门
- 抽象SQL查询:SQL-MAP技术的使用
- 简析60度CMS的Cookies欺骗漏洞
- OC学习13——Foundation框架中的集合
- 如何成为一个伟大的前端工程师
- 花生壳黑吃黑之一:Web练手基地
- OC学习12——字符串、日期、日历
- OpenStack:建立虚拟的渗透测试实验环境 – 安装篇
- OC学习10——内存管理
- 使用CefSharp开发一个12306“安心刷票弹窗通知”工具
- OC学习9——反射机制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux中叹号命令(!)的使用小结
- 基于opencv的selenium滑动验证码的实现
- Laravel5.1 框架文件管理操作实例分析
- 在 Linux 上锁定虚拟控制台会话的实现办法
- php遍历目录下文件并按修改时间排序操作示例
- laravel框架学习记录之表单操作详解
- php基于协程实现异步的方法分析
- Laravel框架实现多数据库连接操作详解
- Laravel5.1 框架Request请求操作常见用法实例分析
- 用python实现学生管理系统
- PHP CURL实现模拟登陆并上传文件操作示例
- python定义类的简单用法
- Linux yum 命令安装mysql8.0的教程详解
- 基于Python实现简单学生管理系统
- php 实现svg转化png格式的方法分析