這期內容當中小編將會給大家?guī)碛嘘P怎么在微信小程序中實現(xiàn)一個錨點功能，文章內容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)致力于成都網站設計、成都網站建設,成都網站設計,集團網站建設等服務標準化，推過標準化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務水平進行質量交付，讓企業(yè)網站從市場競爭中脫穎而出。 選擇創(chuàng)新互聯(lián)，就選擇了安全、穩(wěn)定、美觀的網站建設服務！

 
 {{item}}
 
 
 
 
 
  
 
  
   
   {{item.name}}
   
    
    加入關注
   
   
 
   
   
    
    ·昨天·
    
   
 
   
    
    
     
     2018-09-12 22:15:00
    
    電網故障停限電
    
    
    
     送電時間:
     2018-09-13 16:15:00
     預計
    
    
     停電范圍:
     [開福區(qū)] 湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、
    
    
     停電區(qū)域:
     湖南省長沙市開福區(qū)
    
    
   
   
 
   
   
    
    ·昨天·
    
   
 
   
    
    
     
     2018-09-12 22:15:00
    
    電網故障停限電
    
    
    
     送電時間:
     2018-09-13 16:15:00
     預計
    
    
     停電范圍:
     [開福區(qū)] 湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、
    
    
     停電區(qū)域:
     湖南省長沙市開福區(qū)
    
    
   
   
 
  
 
  
  
  沒有更多信息了
  
 
 
 
 


 

 
 導航
 
 返回頂部
 
  {{item.name}}
  
 

Page({
 data: {
 isnavfixed:true, //是否顯示浮動導航
 toView:'', //顯示區(qū)域
 navlist: [//地區(qū)數(shù)據(jù)
  {
  id:"list0",
  name:'市區(qū)河東'
  },
  {
  id: "list1",
  name: '市區(qū)河西'
  },
  {
  id: "list2",
  name: '長沙縣'
  },
  {
  id: "list3",
  name: '望城區(qū)'
  },
  {
  id: "list4",
  name: '瀏陽市'
  },
  {
  id: "list5",
  name: '寧鄉(xiāng)市'
  }
 ],
 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 不能以數(shù)字開頭

  2.bindscroll 屬性 實時監(jiān)聽滾動 ； 如上面 頁面滾動到一定位置顯示導航按鈕功能

  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%無效

上述就是小編為大家分享的怎么在微信小程序中實現(xiàn)一個錨點功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標題：怎么在微信小程序中實現(xiàn)一個錨點功能-創(chuàng)新互聯(lián)
網頁地址：http://weahome.cn/article/dpdidp.html