微信小程序实现自动定位(微信小程序实现锚点定位功能的方法实例)
类别:编程学习 浏览量:1277
时间:2021-10-05 00:40:38 微信小程序实现自动定位
微信小程序实现锚点定位功能的方法实例前言
在小程序开发中,我们经常会遇到滚动列表查看的需求,那么使用锚点定位来实现可以达到交互体验更加友好的效果,我们看下项目中实现的效果:
功能实现
采用小程序视图容器组件实现:scroll-view
这里需要注意的是,竖向滚动时,scroll-view需要指定一个固定高度,我们看下WXML代码:
<scroll-view style="height:{{autoHeight}};" scroll-y scroll-into-view="{{toView}}" class="scroll-warp" scroll-with-animation="{{true}}" bindscroll="handelScroll"> <block wx:for="{{dataList}}" wx:key="{{index}}"> <view class="floorType" id="{{item.floor}}"> </view> </block> </scroll-view>
这里autoHeight是根据不同机型的高度动态计算出来的,scroll-view有个重要属性:scroll-into-view,它接收一个string值,即为滚动的地点(锚点),那么我们需要在scroll-view子节点也设置相应的锚点列表:如上图的class=floorType节点中的id属性。这样我们的滚动就有了一一对应的关系了,在筛选块点击楼层,将toView变量设置成对应的数据,列表也会滚动到对应的位置。
当我们滚动列表的时候,顶部的高亮筛选项也需要对应切换,那这个时候怎么办呢?
我们可以在bindscroll此事件上做文章:滚动列表的时候会触发此事件。
关键代码:
handelScroll(e) { let scrollTop=e.detail.scrollTop; let scrollArr= this.data.anchorArray; if(scrollTop>=scrollArr[scrollArr.length-1]-this.data.autoHeight){ return; }else { for(let i=0;i<scrollArr.length;i++){ if(scrollTop>=0&&scrollTop<scrollArr[0]){ // selectFloorIndex控制筛选块高亮显示 this.setData({ selectFloorIndex: 0 }); }else if(scrollTop>=scrollArr[i-1]&&scrollTop<scrollArr[i]) { this.setData({ selectFloorIndex: i }); } } } }
这里的anchorArray为所有锚点块所占页面高度的数组总和,用图可以看得更加清晰一点:
每个锚点块都有一个固定的高度,我们在拿到数据渲染完页面后,可以通过
boundingClientRect方法拿到类名为floorType各个节点的高度,并将这些高度装进anchorArray数组中,那么当我们滚动超过某块锚点高度之后,顶部筛选项也会随之切换到下一个。
关键代码:
let query = wx.createSelectorQuery().in(this); let heightArr =[]; let h = 0; query.selectAll('.floorType').boundingClientRect((react)=>{ react.forEach((res)=>{ h+=res.height; heightArr.push(h) }) this.setData({ anchorArray:heightArr }); }).exec();
到这里,我们的锚点定位滚动已完成,希望能对大家有所帮助,如有问题,欢迎沟通指出!
总结
到此这篇关于微信小程序实现锚点定位功能的文章就介绍到这了,更多相关微信小程序锚点定位内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- 微信小程序怎么绕过人脸的(详解微信小程序官方人脸核身认证)
- 苹果微信小程序页面空白(iPhoneX安全区域Safe Area底部小黑条在微信小程序和H5的屏幕适配)
- flask项目微信小程序(Python Flask 搭建微信小程序后台详解)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- 微信小程序可以用百度的echarts吗(uniapp在微信小程序中使用ECharts的方法)
- 微信小程序function怎么使用(微信小程序在{{ }}中直接使用函数的方法示例)
- 9小时搞定微信小程序开发(关于加快微信小程序开发的一些小建议)
- 微信小程序抽签如何抽中(JavaScript实现班级抽签小程序)
- 微信小程序苹果部分内容打不开(微信小程序audio组件在ios端无法播放的解决办法)
- 微信小程序单选框组件(微信小程序picker多列选择器mode = multiSelector)
- 微信小程序日期选择器有星期天(微信小程序 滚动选择器时间日期详解及实例代码)
- 微信小程序转盘动画效果(微信小程序实现摇筛子效果)
- 微信小程序获取时间(微信小程序wxs日期时间处理的实现示例)
- 微信小程序多人编辑表格(微信小程序实现固定表头、列表格组件)
- 微信小程序计算器怎么用(微信小程序实现计算器功能)
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- 大果肉搭配薄瓜皮, 绿宝 脆甜爽口,不愧是甜瓜中的 佼佼者(大果肉搭配薄瓜皮)
- 河南尉氏县因地制宜发展果蔬种植 水坡镇绿宝甜瓜变 金瓜(河南尉氏县因地制宜发展果蔬种植)
- 谢广坤,你这么欺负谢腾飞,良心不会痛吗(你这么欺负谢腾飞)
- 乡村爱情15 宋晓峰怀疑自己孩子,腾飞与姜奶奶亲子鉴定出结果(宋晓峰怀疑自己孩子)
- 《乡村爱情13》开播,新版刘能以假乱真,编剧思维进入瓶颈(新版刘能以假乱真)
- 当年的 白洋淀战神 练肌肉 嘎子哥也成为行走的荷尔蒙(当年的白洋淀战神)
热门推荐
- pythonhash使用(详解python中的hashlib模块的使用)
- dedecms中的有些功能如何修改(解析dedecms空间迁移步骤详解)
- 将mysql中的表导出来(MySQL之导出整个及单个表数据的操作)
- 阿里ecs云服务器新手上路(如何迁移阿里云服务器ECS实例中的网站?)
- 阿里云网站cdn加速(阿里云CDN刷新链接接口实践)
- python创建文件夹(python批量创建指定名称的文件夹)
- C# #define条件编译
- mysql数据备份的几种方式(MySQL数据库备份过程的注意事项)
- laravel查询限制输出设置(laravel 获取某个查询的查询SQL语句方法)
- docker部署mysql多实例(Docker部署mysql一主一从的操作方法)