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

創(chuàng)新互聯(lián)公司-成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷推廣，國(guó)際域名空間，網(wǎng)頁(yè)空間，網(wǎng)站托管、服務(wù)器托管有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問(wèn)題，請(qǐng)聯(lián)系創(chuàng)新互聯(lián)公司。

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


 

 
 導(dǎo)航
 
 返回頂部
 
  {{item.name}}
  
 

Page({
 data: {
 isnavfixed:true, //是否顯示浮動(dòng)導(dǎo)航
 toView:'', //顯示區(qū)域
 navlist: [//地區(qū)數(shù)據(jù)
  {
  id:"list0",
  name:'市區(qū)河?xùn)|'
  },
  {
  id: "list1",
  name: '市區(qū)河西'
  },
  {
  id: "list2",
  name: '長(zhǎng)沙縣'
  },
  {
  id: "list3",
  name: '望城區(qū)'
  },
  {
  id: "list4",
  name: '瀏陽(yáng)市'
  },
  {
  id: "list5",
  name: '寧鄉(xiāng)市'
  }
 ],
 scrollTop: {//豎直滾動(dòng)的位置
  scroll_top: 0, 
  goTop_show: false
 }
 },
 navfixedHandleClick(){
 // 浮動(dòng)導(dǎo)航
 this.setData({
  isnavfixed: !this.data.isnavfixed
 });
 },
 scrollTopFun: function (e) {
 // 頁(yè)面滾動(dòng)到一定位置顯示導(dǎo)航
 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) {
 //點(diǎn)擊導(dǎo)航菜單滾動(dòng)
 var toView = e.currentTarget.dataset.id
 this.setData({
  "toView": toView,
  'isnavfixed': true
 })
 }
})

主要用到 scroll-view 組件  scroll-into-view  屬性；當(dāng)點(diǎn)擊導(dǎo)航菜單的時(shí)候，我們改變相應(yīng)的 scroll-into-view 的值，并且同時(shí)需要在  scroll-view 組件內(nèi)相應(yīng)位置處的子元素上定義相應(yīng)的 id；因?yàn)閟croll-into-view 值應(yīng)為某子元素 id，設(shè)置哪個(gè)方向可滾動(dòng)，則在哪個(gè)方向滾動(dòng)到該元素。

scroll-view 組件使用的一些注意點(diǎn)：

  1. scroll-into-view  與 上面提到的子元素id 不能以數(shù)字開頭

  2.bindscroll 屬性 實(shí)時(shí)監(jiān)聽滾動(dòng) ； 如上面 頁(yè)面滾動(dòng)到一定位置顯示導(dǎo)航按鈕功能

  3.scroll-top 、scroll-left 屬性： 設(shè)置豎向或者橫向滾動(dòng)條位置，如上面 返回頂部 功能

  4.scroll-with-animation 屬性：滾動(dòng)平滑過(guò)渡，提高體驗(yàn)

  5.如果需要隱藏 scroll-view 的滾動(dòng)條使用 css    ::-webkit-scrollbar{width: 0;height: 0;color: transparent;}

  6.如果scroll-view占頁(yè)面整個(gè)高度，可設(shè)置 scroll-view的高度 height:100vh, 設(shè)置height:100%無(wú)效  

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