小程序分頁詳解

小程序已經成為了越來越多人日常生活中必不可少的一部分，而其中的分頁功能更是被廣泛使用。本文將從小程序分頁組件，小程序分頁切換，小程序分頁功能，小程序分頁標籤，小程序分頁載入，小程序分頁定位，小程序分頁帶省略號，小程序分頁效果，小程序分頁查詢，小程序分頁顯示選取等多個方面詳細闡述小程序分頁的相關內容。

一、小程序分頁組件

小程序分頁組件是指小程序中用來展示分頁內容的模塊。我們可以通過使用官方提供的組件，也可以根據自己的需求自行開發分頁組件。下面是一個簡單的小程序分頁組件的代碼示例：

<view class="container">
  <view class="page-item" wx:for="{{pages}}" wx:key="index" bindtap="onPageItemClick" data-index="{{index}}">
    {{item.text}}
  </view>
</view>

上述代碼中的container是整個分頁組件的父容器，page-item則是每個分頁小格子的容器。需要注意的是，這裡使用了wx:for循環來實現動態渲染分頁小格子。

二、小程序分頁切換

小程序分頁切換是指用戶在使用分頁功能時，通過點擊不同的分頁小格子來實現頁面切換的效果。這裡我們需要實現的就是點擊分頁小格子後，頁面可以根據對應的索引值進行切換。

以下是實現分頁切換的代碼示例：

// 在Page對象的data屬性中定義數組pages，用於作為分頁小格子的數據源
Page({
  data: {
    pages: [
      { text: '1', selected: true },
      { text: '2', selected: false },
      { text: '3', selected: false },
      { text: '4', selected: false },
      { text: '5', selected: false },
    ]
  },
  // 為每個分頁小格子綁定點擊事件函數onPageItemClick
  onPageItemClick(event) {
    const currentPageIndex = event.currentTarget.dataset.index
    const pages = this.data.pages
    // 遍歷全部pages數組，將除了當前分頁小格子位置的其他位置的selected屬性全部置為false，只有當前位置的selected屬性為true
    pages.forEach((page, index) => {
      page.selected = index === currentPageIndex
    })
    // 最後需要把修改後的pages數組設置回去，這樣只有選中的分頁小格子才會變色
    this.setData({ pages })
  }
})

三、小程序分頁功能

小程序分頁功能是指通過分頁組件，在頁面展示大量的數據時，將這些數據分成若干個頁面，並且提供給用戶進行分頁查看的功能。下面我們通過一個實際的例子來說明：

我們在一個小程序中需要展示一個電影列表，該電影列表有100部電影。為了避免一次性載入所有電影數據導致頁面卡頓，我們可以將這100部電影分成10頁，每頁顯示10部電影。這樣用戶就可以通過小程序分頁功能來查看這100部電影的數據了。

示例代碼：

// 定義一個長度為100的數組movies，存放100部電影的數據
const movies = new Array(100).fill(0).map((_, index) => ({ id: index, name: '電影' + (index + 1) }))

Page({
  data: {
    // 定義一個長度為10的數組pages，存放10頁數據
    pages: new Array(10).fill(0).map((_, index) => ({
      text: (index + 1),
      selected: index === 0,
      movies: movies.slice(index * 10, (index + 1) * 10),
    })),
    // 定義一個變數currentIndex，表示當前選中的分頁小格子的索引值
    currentIndex: 0,
  },
  onPageItemClick(event) {
    const currentIndex = event.currentTarget.dataset.index
    const pages = this.data.pages
    pages.forEach((page, index) => {
      page.selected = index === currentIndex
    })
    this.setData({ pages, currentIndex })
  }
})

上述代碼中，我們通過計算得到movies數組的10個分頁，利用小程序分頁功能將這10個分頁展示在了小程序中。

四、小程序分頁標籤

小程序分頁標籤是指在分頁組件的每個小格子上面，標記該小格子所對應的分頁頁碼。通常情況下，我們會使用數字來作為分頁頁碼的標記。

以下是一個小程序分頁標籤的代碼示例：

<view class="container">
  <view class="page-item" wx:for="{{pages}}" wx:key="index" bindtap="onPageItemClick" data-index="{{index}}">
    <view class="page-label {{item.selected ? 'selected' : ''}}">
      {{item.text}}
    </view>
  </view>
</view>

上述代碼中的page-label就是用來標記分頁頁碼的容器，通過{{item.text}}來渲染每個分頁頁碼的內容。

五、小程序分頁載入

小程序分頁載入是指在用戶瀏覽某個分頁時，自動載入下一頁的數據。這樣就可以讓用戶無縫瀏覽數據，提供更好的用戶體驗。以下是一個小程序分頁載入的代碼示例：

Page({
  data: {
    movies: [], // 電影列表數據
    page: 1, // 當前頁碼
    limit: 10, // 每頁顯示10條數據
    end: false, // 是否已經到達最後一頁
  },
  onLoad() {
    // 頁面初始化時載入第一頁數據
    this.loadMovies()
  },
  onReachBottom() {
    // 判斷是否已經到達最後一頁
    if (this.data.end) {
      return
    }
    // 載入下一頁數據
    this.setData({ page: this.data.page + 1 }, () => {
      this.loadMovies()
    })
  },
  loadMovies() {
    wx.showLoading({ title: '正在載入' })
    // 調用API載入電影數據
    fetchMovies(this.data.page, this.data.limit)
      .then(movies => {
        this.setData({ movies: [...this.data.movies, ...movies] })
        if (movies.length === 0) {
          // 如果本次載入數據為空，則表示已經到達最後一頁
          this.setData({ end: true })
        }
      })
      .catch(error => {
        wx.showToast({ title: '載入失敗', icon: 'none' })
        console.error(error)
      })
      .finally(() => {
        wx.hideLoading()
      })
  }
})

上述代碼中，我們使用onReachBottom函數來監聽用戶的滾動事件，一旦發現用戶已經到達了頁面底部，就會自動調用loadMovies函數來載入下一頁數據。

六、小程序分頁定位

小程序分頁定位是指在用戶瀏覽分頁數據時，記錄下用戶當前的頁面位置，然後在用戶退出該小程序後再次進入時，自動跳轉到該位置，減少用戶的操作次數，提高用戶體驗。

以下是一個小程序分頁定位的代碼示例：

Page({
  onLoad(options) {
    const { page, position } = options
    this.setData({ page })
    if (position) {
      // 如果存在位置信息，則通過wxml中的scroll-into-view實現滾動定位
      this.setData({ position: `position-${position}` })
    }
  },
  onPageItemClick(event) {
    const currentIndex = event.currentTarget.dataset.index
    const pages = this.data.pages
    pages.forEach((page, index) => {
      page.selected = index === currentIndex
    })
    this.setData({ pages, currentIndex })
    // 記錄位置信息，以便下次定位
    wx.redirectTo({
      url: `/pages/movielist/movielist?page=${currentIndex + 1}&position=${currentIndex}`
    })
  }
})

上述代碼中，我們使用redirectTo函數來跳轉到新頁面，並將位置信息標記在url中傳遞。然後再通過wxml中的scroll-into-view實現滾動定位。

七、小程序分頁帶省略號

當分頁數量很多時，我們可以在分頁組件中使用省略號來表示中間省略的頁碼。以下是一個小程序分頁帶省略號的代碼示例：

<view class="container">
  <view class="page-item" wx:for="{{pages}}" wx:key="index" bindtap="onPageItemClick" data-index="{{index}}">
    {{item.text}}
    <block wx:if="{{item.ellipsis}}">
      …
    </block>
  </view>
</view>

上述代碼中，我們使用wx:if指令來判斷是否需要在分頁小格子中展示省略號。

八、小程序分頁效果

小程序分頁效果是指分頁組件在用戶操作過程中的具體展示效果。例如，我們可以讓分頁小格子在用戶選中時變成彩色。

以下是一個小程序分頁效果的代碼示例：

<view class="container">
  <view class="page-item {{item.selected ? 'selected' : ''}}" wx:for="{{pages}}" wx:key="index" bindtap="onPageItemClick" data-index="{{index}}">
    {{item.text}}
  </view>
</view>

<style>
/* 分頁小格子的基本樣式 */
.page-item {
  display: inline-block;
  width: 44rpx;
  height: 44rpx;
  line-height: 44rpx;
  text-align: center;
}

/* 選中時的樣式 */
.page-item.selected {
  color: #fff;
  background: #007aff;
  border-radius: 22rpx;
}
</style>

上述代碼中，我們在分頁小格子的class屬性中添加了selected類名，當小格子被選中時就會啟用該類名所定義的選中樣式。

九、小程序分頁查詢

小程序分頁查詢是指用戶在使用分頁功能時，可以通過關鍵字來查詢和篩選數據。例如，在一個電影列表中，我們可以根據電影名稱來進行查詢篩選，只顯示滿足條件的電影數據。

以下是一個小程序分頁查詢的代碼示例：

Page({

data: {

query: '', // 查詢關鍵字

movies: [], // 電影列表數據

page: 1, // 當前頁碼

limit: 10, // 每頁顯示10條數據

end: false, // 是否已經到達最後一頁

},

onLoad(options) {

const { query } = options

this.setData({ query })

if (query) {

// 如果存在查詢關鍵字，則自動執行一次搜索

this.searchMovies()

} else {

// 否則直接載入第一頁數據

this.loadMovies()

}

},

onReachBottom() {

// 判斷是否已經到達最後一頁

if (this.data.end) {

return

}

// 載入下一頁數據

this.setData({ page: this.data.page + 1 }, () => {

if (this.data.query) {

// 如果存在查詢關鍵字，則自動執行一次搜索

this.searchMovies()

} else {

// 否則直接載入下一頁數據

this.loadMovies()

}

})

},

onQueryInput(event) {

// 監聽查詢輸入
原創文章，作者：OBKK，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/146740.html