微信小程序之樓層效果

本文轉載自查看原文 2019-07-17 20:52 852 小程序

今天做了一個小程序實現一個樓層效果帶大家分享下經驗和api的使用吧

如圖將左邊和右邊各分了一個組件目錄如下

　　　其中list頁面是這個樓層效果的頁面

　　　components是組成這個頁面的兩個組件

　　　list為列表組件 title為右邊字母固定的組件

list主頁面的代碼如下

<!--pages/list/list.wxml-->
<view class='container'>
  <view class='box'>
    <view class='left' wx:if="{{contentList.length}}">
      <list contentList="{{contentList}}" class="listComponent" currentKey="{{currentKey}}" bind:ChangeId="changeId"></list>
    </view>
  </view>
  <view class='right'>
    <title wx:for="{{titleList}}" wx:key="{{index}}" title="{{item}}" class="{{titleIndex===index?'titleActive':''}}" index="{{index}}" bind:ChangeId="changeId" bind:Changekey='changekey'></title>
  </view>
</view>

上述代碼用到的api 有如下幾點

1、組件的調用需要我們在下list.json先配置下然后直接當成標簽使用

2、組件的傳值如上述代碼

contentList="{{contentList}}"  這種寫法就是組件間的傳值

在list組件的接收這個參數的寫法

　　 properties: {

　　　　contentList: Array,

　　　　currentKey: String

接收后使用的話直接當做data的參數使用就可以嘍

3、父組件向子組件傳個函數讓子組件調用然后改變父組件某個參數

bind:ChangeId="changeId"    這樣是傳發   bind是必須的 用來區分是函數還是變量  bind后面的是讓子組件調用使用的

引號里面為父組件真正定義的函數   注意這里直接  引號 不要加{{}}  

子組件接受這個函數並且調用

　　 this.triggerEvent('ChangeId', {

　　　　id: index

　　})

4、自己定義的函數然后寫在哪里

父組件的話直接找個地方寫函數名就行了

但是子組件需要寫在methods里面

5、加入我們定義的函數需要傳參數怎么辦

第二行就是傳參通過data-傳一個叫做id的參數這里提一下循壞的時候如果我們不去指定變量的話會是item代表每一項 index代表下標如果指定的話可以 wx:for-index="i" 指定下標 wx:for-item="myItem" 制定每一項

然后接受都在e里面如下

e.currentTarget.dataset

6、wx:if="{{contentList.length}}" 判斷是否要渲染下面的元素條件注意這里的條件要放在括號里面去

這個條件需要注意下因為第一次沒加這個東西出現了bug

7、class名的添加 class="{{titleIndex===index?'titleActive':''}}" 基本類似Vue 但是這里加括號

以上為主頁面的知識點介紹下面介紹的list頁面的知識點 title頁面沒有什么可說的基本上就是點擊事件控制父組件的

變量得到顏色的切換以及右邊連帶滾動

list組件代碼

<scroll-view
  scroll-y 
  scroll-into-view="{{currentKey}}" 
  scroll-with-animation 
  bindscroll="handleScroll"
  class='scroll'
>
  <view wx:for="{{contentList}}" wx:key="{{index}}" id="{{item.key}}" class='content'>
    <text class='title'>{{item.key}}</text>

    <view class='item' wx:for="{{item.row}}" wx:key="{{index}}">
      <image src='{{item.img}}' class='img'></image>
      <text class='item-text'>{{item.name}}</text>
    </view>
  </view>
</scroll-view>

1、首先我們這個頁面需要做一個滾動列表然后調用了下人家封裝好的 scroll-view這個組件

對於這個組件簡單的介紹下

a、首先想要得到滾動效果並且觸發組件封裝的函數必須讓其高度小於內容的高度

在上述代碼中也就是 scroll這個元素小於 content這個元素

不然觸發不了

b、scroll-y 設置滾動方向

　 scroll-into-view="{{currentKey}}" 這個變量綁頂右邊字母的 id 在點擊id的時候就會直接讓右邊對應的內容滾到頂部

　先給這個currtKey默認右邊第一個元素的id 之后點擊的時候動態改變

scroll-with-animation 添加動畫效果

　bindscroll="handleScroll" 在頁面滾動的時候會觸發這個然后打印事件對象e會得到你想要的

在這里我們需要e.detail.scrollTop; 獲取滾到高度就可以嘍

c、然后此時這個題到這里基本上就完成了一大半了剩下的就是我們獲取 ABC所有元素距離頂部的距離然后將這些數字儲存起來然后這個函數中循壞比較改變右邊class的類名就可以了 此時碰見的bug就是在子組件如何獲取到某一個class類名的所有元素距離頂部高度

通過官網api查看下面這個方法就可以獲取到

this.createSelectorQuery().selectAll(".content").boundingClientRect((rect) => {

rect.forEach(item => {

arr.push(item.top)

}).exec((res) => {

})

注意在子組件中是this.createSelectorQuery() 在父組件中是ws.createSelectorQuery()

此時我們在子組件的生命周期 ready第一次獲取沒有獲取到就是因為上面的那個判斷條件沒有寫

我們的數據是通過請求傳過來的第一次向這個子組件傳了個空數組頁面什么也沒有渲染而這個周期執行了一遍

所以導致我們什么都沒有獲取到找了半天才發現簡直到了懷疑人生的地步唉~~~

下面順帶介紹下生命周期吧

頁面生命周期

小程序注冊完成后，加載頁面，觸發onLoad方法。
頁面載入后觸發onShow方法，顯示頁面。
首次顯示頁面，會觸發onReady方法，渲染頁面元素和樣式，一個頁面只會調用一次。
當小程序后台運行或跳轉到其他頁面時，觸發onHide方法。
當小程序有后台進入到前台運行或重新進入頁面時，觸發onShow方法。
當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發onUnload

組件的生命周期

created 組件實例化，但節點樹還未導入，因此這時不能用setData

attached 節點樹完成，可以用setData渲染節點，但無法操作節點

ready 組件布局完成，這時可以獲取節點信息，也可以操作節點

moved 組件實例被移動到樹的另一個位置

detached 組件實例從節點樹中移除

組件生命周期不帶on 頁面的帶on

最后介紹下下面地步的配置

通過全局配置 tabBar

在app.json配置如下

 "tabBar": {
    "color": "#333333",  //字體顏色
    "selectedColor": "#f00",  //選中顏色
    "backgroundColor": "#ffffff",  //底部導航顏色
    "borderStyle": "black", //邊框色
    "position": "bottom",   //設置是在底部還是頂部
    "list": [
      {
        "text": "首頁",  //文字內容
        "selectedIconPath": "./static/index-active.png",  //選中的時候圖片展示
        "iconPath": "./static/index.png",  //平常狀態下的圖片樣式
        "pagePath": "pages/index/index"   //點擊要跳轉的位置
      },
      {
        "text": "通訊錄",
        "selectedIconPath": "./static/find-active.png",
        "iconPath": "./static/find.png",
        "pagePath": "pages/list/list"
      },
      {
        "text": "購物車",
        "selectedIconPath": "./static/cart-active.png",
        "iconPath": "./static/cart.png",
        "pagePath": "pages/cart/cart"
      },
      {
        "text": "我的",
        "selectedIconPath": "./static/me-active.png",
        "iconPath": "./static/me.png",
        "pagePath": "pages/my/my"
      }
    ]
  },