小程式 自動導航

劉清朗發表於2018-06-28

小程式 自動導航

導航：橫向導航 豎嚮導航 在很多業務場景中都會用到，那今天我們今天基於微信小程式平臺，分析下導航的製作處理

先看例子

平臺都是大家常用的平臺

小程式 自動導航
首先呢，導航 確實方便了使用者更快更準確的獲取需求資訊，使整個產品 有一個很清晰的 互動流程

導航需要手動滑動切換，小程式的操作流程度只能說優與 瀏覽器，還是比不上native，有時候滑動出現卡頓，最可怕的是出現滾動條，頓時會覺得有點 low

言歸正傳，直接看demo

小程式 自動導航

利用 scroll-view 監聽更新 滾動條的位置，讓選中模組自動滾動進入檢視，同時開啟scroll-with-animation達到緩動的動畫效果

wxml

<scroll-view class="navBar-box" scroll-x="true"
scroll-with-animation="true" scroll-left="{{scrollL}}">
    <view class="cate-item {{curIndex == index ? 'active':''}}"
    wx:for="{{category}}" wx:key="{{item.id}}" data-id="{{item.id}}"
    data-index="{{index}}" bindtap="switchCategory">
        {{item.name}}
    </view>
</scroll-view>
複製程式碼
資料解釋：
  1. scrollL滾動條滾動位置，用於更新滾去距離，達到導航模組 檢視進入視口
  2. curIndex 當前選中的導航子類，用於定位當前模組的active樣式區分
  3. category 導航子類陣列，遍歷展示
  4. switchCategory 捕獲點選導航子類的位置等相關資訊
data 資料
data: {
    title: 'NavBar',
    curIndex:0,  // 當前選中的索引值
    category:[  // 導航集合資料資訊
        {
            name:'推薦',
            id:1,
        },
        ******
    ],
    wWidth: 0, // 視口寬度
    wHeight:0, // 視口高度
    scrollL: 0, // 導航滾動的數值
},
複製程式碼
初始化 獲取視口資訊
show(){
    let wData = wx.getSystemInfoSync();
    this.setData({ 
        wWidth:wData.windowWidth,
        wHeight:wData.windowHeight,
    })  
},
複製程式碼
即時捕獲更新導航位置
switchCategory:function(e){
    let idx = e.currentTarget.dataset.index; // 獲取點選元素的索引
    this.setData({curIndex:idx}) 
    let offsetL = e.target.offsetLeft; // 點選的item距離適口view左邊界距離
    /**
     * 獲取點選元素距離中心的偏移量
     * 滾動距離 = 偏移數值 - 視口／2 (稍微增加一些元素的中間數值)
     */
    let scrollL = offsetL - this.data.wWidth/2 + 20;
    scrollL = scrollL > 0 ? scrollL : 0;
    this.setData({ scrollL:scrollL }) 
},
複製程式碼

具體偏移資料目前還不能達到一個自動化計算的程度，當然可以按照當前item中的 (字數 * 字型大小 + 左右偏移)/2 達到一個準確的資料，使得 導航選中的子類如有條件居中時，更加準確

ps: 隱藏滾動條

::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
複製程式碼

開啟彈性滾動

page{
    -webkit-overflow-scrolling: touch;    
}
複製程式碼

一開始說到豎直滾動條，實現方式跟橫向雷同，沒有什麼特殊，反而不需要考慮 item 自我寬度的居中

小程式 自動導航

如有任何問題，請留言，會及時更正，謝謝

原始碼地址：github

如果喜歡給個start，哈哈hahahahahahahah

相關文章