目錄

???全局配置-window

??window小程序窗口的組成部分

??window節(jié)點常用的配置項

??window導航欄相關設置

設置導航欄標題

設置導航欄背景顏色?

設置導航欄的標題顏色?

??window下拉刷新?

設置全局下拉刷新功能??

設置下拉刷新的窗口背景色?

設置下拉刷新的loading樣式?

監(jiān)聽頁面下拉事件?

?停止下拉刷新效果

??window上拉觸底

什么是上拉觸底

監(jiān)聽頁面上拉觸底事件?

配置上拉觸底距離?

上拉觸底案例

?步驟1 - 定義獲取隨機顏色的方法

步驟2 - 在頁面加載時獲取初始數據

步驟3 - 渲染 UI 結構并美化頁面效果

步驟4 - 上拉觸底時獲取隨機顏色?

步驟5 - 添加 loading 提示效果

步驟6 - 對上拉觸底進行節(jié)流處理

???頁面配置?

???全局配置-window

全局設置小程序窗口的外觀。

小程序根目錄下的 app.json 文件是小程序的全局配置文件。常用的配置項如下：

• pages記錄當前小程序所有頁面的存放路徑
• window全局設置小程序窗口的外觀
• tabBar設置小程序底部的 tabBar 效果
• style是否啟用新版的組件樣式

??window小程序窗口的組成部分

??window節(jié)點常用的配置項

??window導航欄相關設置

設置導航欄標題

設置導航欄背景顏色?

設置導航欄的標題顏色?

??window下拉刷新?

下拉刷新是移動端的專有名詞，指的是通過手指在屏幕上的下拉滑倒操作，從而重新加載頁面數據的行為。

啟用下拉刷新的兩種方式：

①全局開啟下拉刷新

在app.json的window節(jié)點中，將enablePullDownRefresh 設置為 true

②局部開啟下拉刷新

在頁面的.json配置文件中，將enablePullDownRefresh 設置為 true

在實際開發(fā)中，推薦使用第2種方式，為需要的頁面單獨開啟下拉刷新的效果。

設置全局下拉刷新功能??

注意：在app.json中啟用下拉刷新功能，會作用于每個小程序頁面。?

設置下拉刷新的窗口背景色?

當全局開啟下拉刷新后，默認的窗口背景色為白色，如果自定義下拉刷新窗口的背景色，可以通過如下設置：

設置下拉刷新的loading樣式?

當全局開啟下拉刷新功能之后，默認窗口的loading樣式為白色，如果想更改loading樣式的效果，可以將backgroundTextStyle修改值，但可選值只有?light?和?dark?兩種。

監(jiān)聽頁面下拉事件?

在頁面的.js文件中，通過onPullDownRefresh()函數即可監(jiān)聽當前頁面的下拉刷新事件

//頁面結構
<view>count的值是：{{count}}</view>
<button bindtap="addCount">+1</button>
 
//給js文件data設置初始數據
data: {
    count:0
}
 
// +1 按鈕設置點擊事件處理函數
addCount(){
  this.setData({
    count:this.data.count + 1
  })
}
 
/**
 * 頁面相關事件處理函數--監(jiān)聽用戶下拉動作
 */
onPullDownRefresh() {
  this.setData({
    count:0
  })
},

?停止下拉刷新效果

根據上文案例，雖然在編輯器模擬器上效果良好但在在真機模擬過程中，下拉刷新是不會停止的，會一直刷新下去，所以我們要進行設置將其刷新后停止繼續(xù)下拉刷新。

當處理完下拉刷新后，下拉刷新的loading效果會一直顯示，不會主動消失，所以要手動隱藏loading效果。此時，調用wx.stopPullDownRefresh()可以停止當前頁面的刷新。

/**
 * 頁面相關事件處理函數--監(jiān)聽用戶下拉動作
 */
onPullDownRefresh() {
  this.setData({
    count:0
  })
  //當數據重置成功后，調用此函數，關閉下拉刷新效果
  wx.stopPullDownRefresh()
},

??window上拉觸底

什么是上拉觸底

上拉觸底是移動端的專有名稱，通過手指在屏幕上的滑動操作，從而加載更多數據的行為。

簡言之：當手機瀏覽頁面時，需要下滑得到更多內容，當滾動條滾動到下面多少的距離需要自動加載下一頁，這個距離就是上拉觸底的距離。默認距離為50px，如果沒有特殊需求，建議使用默認值即可。

監(jiān)聽頁面上拉觸底事件?

在頁面的.js文件中，通過onReachBottom()函數即可監(jiān)聽當前頁面的上拉觸底事件。

/**
 * 頁面上拉觸底事件的處理函數
 */
onReachBottom() {
  console.log('觸發(fā)了上拉觸底事件');
}

配置上拉觸底距離?

上拉觸底距離指的是觸發(fā)上拉觸底事件時，滾動條距離頁面底部的距離。

可以在全局或者頁面的.json文件中，通過onReachBottomDistance屬性來配置上拉觸底的距離。

上拉觸底案例

• 定義獲取隨機顏色的方法
• 在頁面加載時獲取初始數據
• 渲染 UI 結構并美化頁面效果
• 在上拉觸底時調用獲取隨機顏色的方法
• 添加 loading 提示效果
• 對上拉觸底進行節(jié)流處理

?步驟1 - 定義獲取隨機顏色的方法

<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>

步驟2 - 在頁面加載時獲取初始數據

  onLoad: function (options) {
    this.getColors()
  },

步驟3 - 渲染 UI 結構并美化頁面效果

.num-item {
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  line-height: 200rpx;
  margin: 15rpx;
  text-align: center;
  text-shadow: 0rpx 0rpx 5rpx #fff;
  box-shadow: 1rpx 1rpx 6rpx #aaa;
  color: black;
}

步驟4 - 上拉觸底時獲取隨機顏色?

  onReachBottom: function () {
    this.getColors()
  },

步驟5 - 添加 loading 提示效果

步驟6 - 對上拉觸底進行節(jié)流處理

在 data 中定義?isloading?節(jié)流閥

• false 表示當前沒有進行任何數據請求
• true 表示當前正在進行數據請求

在?getColors()?方法中修改?isloading?節(jié)流閥的值

• 在剛調用?getColors?時將節(jié)流閥設置 true
• 在網絡請求的 complete 回調函數中，將節(jié)流閥重置為 false

在?onReachBottom?中判斷節(jié)流閥的值，從而對數據請求進行節(jié)流控制

• 如果節(jié)流閥的值為 true，則阻止當前請求
• 如果節(jié)流閥的值為 false，則發(fā)起數據請求

 data: {
    colorList: [],
    isloding: false
  },

  getColors() {
    this.setData({
      isloding: true
    })
    // 需要展示 loading 效果
    wx.showLoading({
      title: '數據加載中...'
    })
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method: 'get',
      success: ({ data: res }) => {
        this.setData({
          colorList: [...this.data.colorList, ...res.data]
        })
      },
      complete: () => {
        wx.hideLoading()
        this.setData({
          isloding: false
        })
      }
    })
  },

 /**
  * 頁面上拉觸底事件的處理函數
 */
  onReachBottom: function () {
    if (this.data.isloding) return

    this.getColors()
  },

???頁面配置?

小程序中，app.json中的window節(jié)點，可以全局配置小程序中的每一個頁面窗口的表現，如果某些小程序頁面想要擁有特殊的窗口表現，頁面的.json文件可以實現這種需求。

注意：當頁面配置與全局配置發(fā)生沖突的時候，根據就近原則，最終的效果以頁面配置為準。

文章來源地址http://www.zghlxwxcb.cn/news/detail-827023.html

到了這里，關于⑥微信小程序--》小程序全局配置和詳解下拉刷新和上拉觸底頁面事件的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！