微信小程序实现锚点功能

2023-08-08 13:11:04 79

“锚点”功能在实际应用设计的好，可以提高用户体验。今天碰到一个类似下面功能：

由于页面数据比较多，除了做些上拉加载，下拉刷新等优化。还可以进行进行分类，如上图。功能要求:点击导航的菜单，相应页面的分类内容滑动到页面顶部。由于微信小程序页面无dom操作，改功能改如何操作呢？

一开始想到wx.pageScrollTo(Objectobject)这个API，由于每个点击每个导航利用wx.pageScrollTo滚动到相应分类的scrollTop不能确定，所以放弃了。

后发现scroll-view组件的属性scroll-into-view可以利用一下：





{{item}}









{{item.name}}


加入关注






·昨天·







2018-09-1222:15:00

电网故障停限电



送电时间:
2018-09-1316:15:00
预计


停电范围:
[开福区]湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、


停电区域:
湖南省长沙市开福区








·昨天·







2018-09-1222:15:00

电网故障停限电



送电时间:
2018-09-1316:15:00
预计


停电范围:
[开福区]湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、


停电区域:
湖南省长沙市开福区









没有更多信息了










导航

返回顶部

{{item.name}}

Page({
data:{
isnavfixed:true,//是否显示浮动导航
toView:'',//显示区域
navlist:[//地区数据
{
id:"list0",
name:'市区河东'
},
{
id:"list1",
name:'市区河西'
},
{
id:"list2",
name:'长沙县'
},
{
id:"list3",
name:'望城区'
},
{
id:"list4",
name:'浏阳市'
},
{
id:"list5",
name:'宁乡市'
}
],
scrollTop:{//竖直滚动的位置
scroll_top:0,
goTop_show:false
}
},
navfixedHandleClick(){
//浮动导航
this.setData({
isnavfixed:!this.data.isnavfixed
});
},
scrollTopFun:function(e){
//页面滚动到一定位置显示导航
if(e.detail.scrollTop>200){
this.setData({
'scrollTop.goTop_show':true
});
}else{
this.setData({
'scrollTop.goTop_show':false
});
}
},
gotop(){
//返回顶部,
var_top=this.data.scrollTop.scroll_top;
_top==1?_top=0:_top=1
this.setData({
'scrollTop.scroll_top':_top,
'isnavfixed':true
});
console.log(this.data.scrollTop);
},
clickScroll:function(e){
//点击导航菜单滚动
vartoView=e.currentTarget.dataset.id
this.setData({
"toView":toView,
'isnavfixed':true
})
}
})

主要用到scroll-view组件 scroll-into-view 属性；当点击导航菜单的时候，我们改变相应的scroll-into-view的值，并且同时需要在 scroll-view组件内相应位置处的子元素上定义相应的id；因为scroll-into-view值应为某子元素id，设置哪个方向可滚动，则在哪个方向滚动到该元素。

scroll-view组件使用的一些注意点：

1.scroll-into-view 与上面提到的子元素id不能以数字开头

2.bindscroll属性实时监听滚动；如上面页面滚动到一定位置显示导航按钮功能

3.scroll-top、scroll-left属性：设置竖向或者横向滚动条位置，如上面返回顶部功能

4.scroll-with-animation属性：滚动平滑过渡，提高体验

5.如果需要隐藏scroll-view的滚动条使用css ::-webkit-scrollbar{width:0;height:0;color:transparent;}

6.如果scroll-view占页面整个高度，可设置scroll-view的高度height:100vh,设置height:100%无效（vh：相对于视口的高度。视口被均分为100单位的vh）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序实现锚点功能

热门推荐

随机推荐