小程序中的事件

1,什么是事件?

事件是視圖層到邏輯層的通訊方式。

事件可以將用戶的行為反饋到邏輯層進行處理。

事件可以綁定在組件上,當(dāng)組件觸發(fā)事件,就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。

事件對象可以攜帶額外信息,如 id, dataset, touches。

2,觸摸事件? ?bindtop

page中寫相應(yīng)的事件函數(shù),事件參數(shù)是event

3,bindinput綁定文本框輸入事件

?page中寫相應(yīng)的事件函數(shù),事件參數(shù)是event

4,data和文本框之間的數(shù)據(jù)同步

在文本框的 input 事件處理函數(shù)中,通過事件參數(shù) event,能夠訪問到文本框的最新值:

語法:event.detail.value

5,修改data中的數(shù)據(jù)

通過 this.setData(dataObject) 方法,可以給頁面中的 data 數(shù)據(jù)重新賦值。

例如:監(jiān)聽文本框的數(shù)據(jù)變化,并把最新的值賦值給 data 中的 msg

示例代碼如下:

6,事件傳參

(1)不能綁定事件時同時傳參

此代碼不能正常工作,因為小程序會把 bindtap 后指定的值,統(tǒng)一當(dāng)作事件名稱來處理

(2).通過 data-* 自定義屬性傳參

info作為參數(shù)名,值是123

頁面事件

(1)下拉

1.啟用下拉刷新

(1)需要在 app.json 的 window 選項中或頁面配置中開啟 enablePullDownRefresh。但是,一般情況下,推薦在頁面配置中為需要的頁面單獨開啟下拉刷新行為。

(2)可以通過 wx.startPullDownRefresh() 觸發(fā)下拉刷新,調(diào)用后觸發(fā)下拉刷新動畫,效果與用戶手動下拉刷新一致。

2.配置下拉刷新窗口的樣式

需要在 app.json 的 window 選項中或頁面配置中修改 backgroundColor 和 backgroundTextStyle 選項。

backgroundColor 用來配置下拉刷新窗口的背景顏色,僅支持16進制顏色值

backgroundTextStyle 用來配置下拉刷新 loading 的樣式,僅支持 dark 和 light監(jiān)聽

3.頁面的下拉刷新事件

為頁面添加 onPullDownRefresh() 函數(shù),可以監(jiān)聽用戶在當(dāng)前頁面的下拉刷新事件

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

(2)上拉

概念:在移動端,隨著手指不斷向上滑動,當(dāng)內(nèi)容將要到達屏幕底部的時候,頁面會隨之不斷的加載后續(xù)內(nèi)容,直到?jīng)]有新內(nèi)容為止,我們稱之為上拉加載更多。上拉加載更多的本質(zhì)就是數(shù)據(jù)的分頁加載。

應(yīng)用場景:在移動端,列表數(shù)據(jù)的分頁加載,首選的實現(xiàn)方式就是上拉加載更多

配置上拉觸底的距離

可以在 app.json 的 window 選項中或頁面配置中設(shè)置觸底距離 onReachBottomDistance。單位為px,默認觸底距離為 50px。

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

為頁面添加 onReachBottom() 函數(shù),可以監(jiān)聽用戶在當(dāng)前頁面的上拉觸底事件,從而實現(xiàn)上拉加載更多列表數(shù)據(jù)的效果。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容