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

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

<scroll-view scroll-y
scroll-into-view="{{toView}}"
bindscroll="scrollTopFun"
style='height:100vh'
scroll-top="{{scrollTop.scroll_top}}"
scroll-with-animation="true"
>
<!-- 內容 -->
<view class='bg-white m-t10'>
 <view class='flex'>
 <view class='flex-1 f16 p-v text-center {{currentId === index? "active":""}}'
 data-id="{{index}}" bindtap='navHandleClick'
  wx:for="{{navietm}}" wx:key="{{index}}">{{item}}</view>
 </view>
 
 <view class='has-padding-sm'>
 <!-- 實時停電信息 -->
 <view>
  <view class='m-t10' wx:for="{{navlist}}" wx:key="{{index}}">
 
  <view class='itembox' id='{{item.id}}'>
   <view class='titlebox flex'>
   <view class='flex-1 text-ellipsis'>{{item.name}}</view>
   <view class='f12'>
    <text class='icon icon-like-o inline-middle'></text>
    <text class='inline-middle m-l5'>加入關注</text>
   </view>
   </view>
 
   <view class='itemconbox'>
   <view class='flex c9'>
    <view class='line m-r5 flex-1 self-middle'></view>
    ·<text class='p-w-sm'>昨天</text>·
    <view class='line m-l5 flex-1 self-middle'></view>
   </view>
 
   <view class='bg-white p-w-sm radius-sm m-t5' bindtap="togglePopup">
    <view class='border-line-b flex text-bold p-t5 p-b5'>
    <view class='flex-1'>
     <image src='../../images/date.png' class='ico-date inline-middle'></image>
     <text class='inline-middle m-l10'>2018-09-12 22:15:00</text>
    </view>
    <view>電網故障停限電</view>
    </view>
    <view class='p-w-sm p-v-sm'>
    <view>
     <text class='text-bold m-r10 c-11A99A'>送電時間:</text>
     <text class='f12 c6'>2018-09-13 16:15:00</text>
     <text class='label bg-A5A5A5'>預計</text>
    </view>
    <view>
     <text class='text-bold m-r10 c-11A99A'>停電范圍:</text>
     <text class='f12 c6'>[開福區(qū)] 湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、</text>
    </view>
    <view>
     <text class='text-bold m-r10 c-11A99A'>停電區(qū)域:</text>
     <text class='f12 c6'>湖南省長沙市開福區(qū)</text>
    </view>
    </view>
   </view>
   </view>
 
   <view class='itemconbox'>
   <view class='flex c9'>
    <view class='line m-r5 flex-1 self-middle'></view>
    ·<text class='p-w-sm'>昨天</text>·
    <view class='line m-l5 flex-1 self-middle'></view>
   </view>
 
   <view class='bg-white p-w-sm radius-sm m-t5' bindtap="togglePopup">
    <view class='border-line-b flex text-bold p-t5 p-b5'>
    <view class='flex-1'>
     <image src='../../images/date.png' class='ico-date inline-middle'></image>
     <text class='inline-middle m-l10'>2018-09-12 22:15:00</text>
    </view>
    <view>電網故障停限電</view>
    </view>
    <view class='p-w-sm p-v-sm'>
    <view>
     <text class='text-bold m-r10 c-11A99A'>送電時間:</text>
     <text class='f12 c6'>2018-09-13 16:15:00</text>
     <text class='label bg-A5A5A5'>預計</text>
    </view>
    <view>
     <text class='text-bold m-r10 c-11A99A'>停電范圍:</text>
     <text class='f12 c6'>[開福區(qū)] 湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、</text>
    </view>
    <view>
     <text class='text-bold m-r10 c-11A99A'>停電區(qū)域:</text>
     <text class='f12 c6'>湖南省長沙市開福區(qū)</text>
    </view>
    </view>
   </view>
   </view>
 
  </view>
 
  </view>
  <view class='text-center p-t10 f12 c9'>
  沒有更多信息了
  </view>
 </view>
 
 </view>
 
</view>
</scroll-view>
 
<!-- 導航 -->
<view class='nav-fixed' wx:if="{{scrollTop.goTop_show}}"> <!-- 滾動到離頂部一定距離在顯示導航按鈕 -->
 <view class='navitembtn shadow {{isnavfixed ? "":"navitembtned"}}' catchtap='navfixedHandleClick'>導航</view>
 <view class='navconbox' hidden='{{isnavfixed}}'>
 <view class='floor gotop' catchtap='gotop'>返回頂部</view>
 <view class='floor' bindtap='clickScroll' data-id="{{item.id}}"
  wx:for="{{navlist}}" wx:key="{{index}}">
  {{item.name}}
  </view>
 </view>
</view>

Page({
 data: {
 isnavfixed:true, //是否顯示浮動導航
 toView:'', //顯示區(qū)域
 navlist: [//地區(qū)數據
  {
  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 不能以數字開頭

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

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

分享名稱：怎么在微信小程序中實現一個錨點功能
本文路徑：http://chinadenli.net/article37/jscosj.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、營銷型網站建設、虛擬主機、品牌網站設計、品牌網站制作、商城網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)