微信小程序知識點整理(四)——頁面事件

一、下拉刷新

下拉刷新的概念以及場景

• 概念：下拉刷新是移動端更新列表數據的交互行爲，用戶通過手指在屏幕上自上而下的滑動，可以觸發頁面的下拉刷新，更新列表數據。
• 應用場景：在移動端，數據列表是常見的頁面效果，更新列表數據是最基本的頁面需求，相比於按鈕刷新、定時刷新來說，下拉刷新的用戶體驗方便友好，已經成爲移動端刷新列表數據的最佳解決方案。

如何啓動下拉刷新

• 在 app.json 的 window 選項中或頁面配置中開啓 enablePullDownRefresh。

{
  "usingComponents": {},
  "enablePullDownRefresh": true
}

• 可以通過 wx.startPullDownRefresh() 觸發下拉刷新，調用後觸發下拉刷新動畫，效果與用戶手動下拉刷新一致。

<button bindtap="refresh" type="primary">刷新</button>

refresh:function() {
    wx.startPullDownRefresh()
  }

注意： 一般情況下，推薦在頁面配置中爲需要的頁面單獨開啓下拉刷新行爲

設置下拉刷新窗口的樣式

• 在 app.json 的 window 選項中或頁面配置中修改 backgroundColor 和 backgroundTextStyle 選項。
• backgroundColor 用來配置下拉刷新窗口的背景顏色，僅支持16進制顏色值
• backgroundTextStyle 用來配置下拉刷新 loading 的樣式，僅支持 dark 和 light

監聽下拉刷新事件

需要先開啓下拉刷新

• 爲頁面添加 onPullDownRefresh() 函數，可以監聽用戶在當前頁面的下拉刷新事件。

/**
 * 頁面相關事件處理函數--監聽用戶下拉動作
 */
onPullDownRefresh: function () {
  console.log('觸發下拉刷新啦')
}

停止下拉刷新

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

/**
 * 頁面相關事件處理函數--監聽用戶下拉動作
 */
onPullDownRefresh: function () {
  	console.log('觸發下拉刷新啦')
	 setTimeout(function(){
	 wx.stopPullDownRefresh()
	 },2000)
}

二、上拉加載

上拉加載的概念以及場景

• 概念：在移動端，隨着手指不斷向上滑動，當內容將要到達屏幕底部的時候，頁面會隨之不斷的加載後續內容，直到沒有新內容爲止，我們稱之爲上拉加載更多。上拉加載更多的本質就是數據的分頁加載。
• 應用場景：在移動端，列表數據的分頁加載，首選的實現方式就是上拉加載更多。

設置上拉加載的距離

• 在 app.json 的 window選項中或頁面配置中設置觸底距離 onReachBottomDistance。單位爲px，默認觸底距離爲 50px。
• 爲頁面添加 onReachBottom() 函數，可以監聽用戶在當前頁面的上拉觸底事件，從而實現上拉加載更多列表數據的效果。

/**
 * 頁面上拉觸底事件的處理函數
 */
onReachBottom: function () {
  console.log('觸發上拉刷新啦')
}

案例

<!--wxml  *this 表示用item來做唯一的標識-->
<view wx:for="{{dataList}}" wx:key="*this" class="list">
{{item}}
</view>

// js
  data: {
    dataList:[1,2,3,4,5,6,7,8,9,10],
    pageSize:1
  },
/**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    console.log("觸底了")
    this.setData({
      pageSize:this.data.pageSize+1
    })
   let newArr = []
   for(let i = 0;i<10;i++){
     newArr.push((this.data.pageSize-1)*10 +i+1)
   }
   this.setData({
     dataList: [...this.data.dataList,...newArr]
   })
  }

三、頁面滑動事件onPageScroll

• 監聽用戶滑動頁面事件

  • 得到 scrollTop，頁面在垂直方向已滾動的距離（單位px）

// 頁面滑動事件
  onPageScroll: function (e) {
    console.log(e.scrollTop)
  }

四、分享事件 onShareAppMessage

• 監聽用戶點擊頁面內轉發按鈕（<button> 組件 open-type="share"）
• 右上角菜單“轉發”按鈕的行爲，並自定義轉發內容。

參數	類型	說明
from	String	轉發事件來源。button：頁面內轉發按鈕；menu：右上角轉發菜單
target	Object	如果 from 值是 button，則 target 是觸發這次轉發事件的 button，否則爲 undefined
webViewUrl	String	頁面中包含<web-view>組件時，返回當前<web-view>的url

 /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function (e) {
   console.log(e)
  }

• 自定義轉發內容， return 一個 Object就可以

字段	說明	默認值
title	轉發標題	當前小程序名稱
path	轉發路徑	當前頁面 path ，必須是以/開頭的完整路徑
imageUrl	自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網絡圖片路徑。支持PNG及JPG。顯示圖片長寬比是 5:4。	默認使用當前頁面截圖

 /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function (e) {
   console.log(e)
   return {
     title:'轉發內容',
     path:'/pages/home/home',
     imageUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576818531394&di=e4d379ce6951a1425a27855731e1b79d&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg'
   }
  }

五、點擊 tabBar時觸發事件 onTabItemTap

參數	類型	說明
index	String	被點擊 tabItem 的序號，從0開始
pagePath	String	被點擊tabItem 的頁面路徑
text	String	被點擊 tabItem 的按鈕文字

// 點擊tabBar觸發事件
  onTabItemTap(item){
    console.log(item.index)// 1
    console.log(item.pagePath)// pages/tabMessage/tabMessage
    console.log(item.text)// 消息
  }