怎么在微信小程序中实现一个锚点功能-创新互联

这期内容当中小编将会给大家带来有关怎么在微信小程序中实现一个锚点功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

 
 {{item}}
 
 
 
 
 
  
 
  
   
   {{item.name}}
   
    
    加入关注
   
   
 
   
   
    
    ·昨天·
    
   
 
   
    
    
     
     2018-09-12 22:15:00
    
    电网故障停限电
    
    
    
     送电时间:
     2018-09-13 16:15:00
     预计
    
    
     停电范围:
     [开福区] 湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、
    
    
     停电区域:
     湖南省长沙市开福区
    
    
   
   
 
   
   
    
    ·昨天·
    
   
 
   
    
    
     
     2018-09-12 22:15:00
    
    电网故障停限电
    
    
    
     送电时间:
     2018-09-13 16: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) {
 //点击导航菜单滚动
 var toView = 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%无效

上述就是小编为大家分享的怎么在微信小程序中实现一个锚点功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。