快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)錨點功能

更新時間：2019年11月20日 14:32:58 作者：￡AP︶ㄣOL◢◤LO

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)錨點功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

“錨點”功能在實際應(yīng)用設(shè)計的好，可以提高用戶體驗。今天碰到一個類似下面功能：

由于頁面數(shù)據(jù)比較多，除了做些上拉加載，下拉刷新等優(yōu)化。還可以進行進行分類，如上圖。功能要求:點擊導(dǎo)航的菜單，相應(yīng)頁面的分類內(nèi)容滑動到頁面頂部。由于微信小程序頁面無dom操作，改功能改如何操作呢？

一開始想到 wx.pageScrollTo(Object object) 這個API，由于每個點擊每個導(dǎo)航利用wx.pageScrollTo滾動到相應(yīng)分類的scrollTop不能確定，所以放棄了。

后發(fā)現(xiàn) scroll-view 組件的屬性 scroll-into-view 可以利用一下：

<scroll-view scroll-y
scroll-into-view="{{toView}}"
bindscroll="scrollTopFun"
style='height:100vh'
scroll-top="{{scrollTop.scroll_top}}"
scroll-with-animation="true"
>
<!-- 內(nèi)容 -->
<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'>加入關(guān)注</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>電網(wǎng)故障停限電</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'>預(yù)計</text>
    </view>
    <view>
     <text class='text-bold m-r10 c-11A99A'>停電范圍:</text>
     <text class='f12 c6'>[開福區(qū)] 湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、</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>電網(wǎng)故障停限電</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'>預(yù)計</text>
    </view>
    <view>
     <text class='text-bold m-r10 c-11A99A'>停電范圍:</text>
     <text class='f12 c6'>[開福區(qū)] 湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、</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>
 
<!-- 導(dǎo)航 -->
<view class='nav-fixed' wx:if="{{scrollTop.goTop_show}}"> <!-- 滾動到離頂部一定距離在顯示導(dǎo)航按鈕 -->
 <view class='navitembtn shadow {{isnavfixed ? "":"navitembtned"}}' catchtap='navfixedHandleClick'>導(dǎo)航</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, //是否顯示浮動導(dǎo)航
 toView:'', //顯示區(qū)域
 navlist: [//地區(qū)數(shù)據(jù)
  {
  id:"list0",
  name:'市區(qū)河?xùn)|'
  },
  {
  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(){
 // 浮動導(dǎo)航
 this.setData({
  isnavfixed: !this.data.isnavfixed
 });
 },
 scrollTopFun: function (e) {
 // 頁面滾動到一定位置顯示導(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) {
 //點擊導(dǎo)航菜單滾動
 var toView = e.currentTarget.dataset.id
 this.setData({
  "toView": toView,
  'isnavfixed': true
 })
 }
})

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

scroll-view 組件使用的一些注意點：

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

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

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

4.scroll-with-animation 屬性：滾動平滑過渡，提高體驗

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

6.如果scroll-view占頁面整個高度，可設(shè)置 scroll-view的高度 height:100vh , 設(shè)置height:100%無效（vh：相對于視口的高度。視口被均分為100單位的vh）

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: