1,什么是事件跨嘉?
事件是視圖層到邏輯層的通訊方式川慌。
事件可以將用戶(hù)的行為反饋到邏輯層進(jìn)行處理。
事件可以綁定在組件上祠乃,當(dāng)組件觸發(fā)事件梦重,就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。
事件對(duì)象可以攜帶額外信息亮瓷,如 id, dataset, touches琴拧。
2,觸摸事件? ?bindtop
page中寫(xiě)相應(yīng)的事件函數(shù)嘱支,事件參數(shù)是event
3蚓胸,bindinput綁定文本框輸入事件
4斗塘,data和文本框之間的數(shù)據(jù)同步
在文本框的 input 事件處理函數(shù)中赢织,通過(guò)事件參數(shù) event,能夠訪問(wèn)到文本框的最新值:
語(yǔ)法:event.detail.value
5馍盟,修改data中的數(shù)據(jù)
通過(guò) this.setData(dataObject) 方法于置,可以給頁(yè)面中的 data 數(shù)據(jù)重新賦值。
例如:監(jiān)聽(tīng)文本框的數(shù)據(jù)變化贞岭,并把最新的值賦值給 data 中的 msg
示例代碼如下:
6八毯,事件傳參
(1)不能綁定事件時(shí)同時(shí)傳參
(2).通過(guò) data-* 自定義屬性傳參
頁(yè)面事件
(1)下拉
1.啟用下拉刷新
(1)需要在 app.json 的 window 選項(xiàng)中或頁(yè)面配置中開(kāi)啟 enablePullDownRefresh。但是芯侥,一般情況下泊交,推薦在頁(yè)面配置中為需要的頁(yè)面單獨(dú)開(kāi)啟下拉刷新行為。
(2)可以通過(guò) wx.startPullDownRefresh() 觸發(fā)下拉刷新柱查,調(diào)用后觸發(fā)下拉刷新動(dòng)畫(huà)廓俭,效果與用戶(hù)手動(dòng)下拉刷新一致。
2.配置下拉刷新窗口的樣式
需要在 app.json 的 window 選項(xiàng)中或頁(yè)面配置中修改 backgroundColor 和 backgroundTextStyle 選項(xiàng)唉工。
backgroundColor 用來(lái)配置下拉刷新窗口的背景顏色研乒,僅支持16進(jìn)制顏色值
backgroundTextStyle 用來(lái)配置下拉刷新 loading 的樣式,僅支持 dark 和 light監(jiān)聽(tīng)
3.頁(yè)面的下拉刷新事件
為頁(yè)面添加 onPullDownRefresh() 函數(shù)淋硝,可以監(jiān)聽(tīng)用戶(hù)在當(dāng)前頁(yè)面的下拉刷新事件
當(dāng)處理完下拉刷新后雹熬,下拉刷新的 loading 效果會(huì)一直顯示宽菜,不會(huì)主動(dòng)消失,所以需要手動(dòng)隱藏下拉刷新的 loading 效果竿报。此時(shí)铅乡,調(diào)用 wx.stopPullDownRefresh() 可以停止當(dāng)前頁(yè)面的下拉刷新。
(2)上拉
概念:在移動(dòng)端仰楚,隨著手指不斷向上滑動(dòng)隆判,當(dāng)內(nèi)容將要到達(dá)屏幕底部的時(shí)候,頁(yè)面會(huì)隨之不斷的加載后續(xù)內(nèi)容僧界,直到?jīng)]有新內(nèi)容為止侨嘀,我們稱(chēng)之為上拉加載更多。上拉加載更多的本質(zhì)就是數(shù)據(jù)的分頁(yè)加載捂襟。
應(yīng)用場(chǎng)景:在移動(dòng)端咬腕,列表數(shù)據(jù)的分頁(yè)加載,首選的實(shí)現(xiàn)方式就是上拉加載更多
配置上拉觸底的距離
可以在 app.json 的 window 選項(xiàng)中或頁(yè)面配置中設(shè)置觸底距離 onReachBottomDistance葬荷。單位為px涨共,默認(rèn)觸底距離為 50px。
監(jiān)聽(tīng)頁(yè)面的上拉觸底事件
為頁(yè)面添加 onReachBottom() 函數(shù)宠漩,可以監(jiān)聽(tīng)用戶(hù)在當(dāng)前頁(yè)面的上拉觸底事件举反,從而實(shí)現(xiàn)上拉加載更多列表數(shù)據(jù)的效果。