<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                >[success] # 小程序事件 1. 小程序需要經常和**用戶進行某種交互**,比如點擊界面上的某個按鈕或者區域,比如滑動了 個區域; 2. 事件是**視圖層到邏輯層的通訊方式**; 3. 事件**可以將用戶的行為反饋到邏輯層進行處理**; 4. 事件**可以綁定在組件上,當觸發事件時,就會執行邏輯層中對應的事件處理函數**; 5. 事件對象**可以攜帶額外信息**,如 id, dataset, touches; >[danger] ##### 圖解處理過程 * [# 微信小程序的基本原理](https://juejin.cn/post/7024872361048408077) ![](https://img.kancloud.cn/22/9a/229a002582a8f91291d059ec5e76ab79_807x566.png) >[danger] ##### 如何使用 1. 事件是通過`bind/catch`這個屬性綁定在組件上的(和普通的屬性寫法很相似, 以key=“value”形式); 2. `key`以`bind`或`catch`開頭, 從1.5.0版本開始, 可以在`bind`和`catch`后加上一個冒號; 3. 同時在當前頁面的`Page`構造器中定義對應的事件處理函數, 如果沒有對應的函數, 觸發事件時會報錯; 4. 當用戶點擊該button區域時,達到觸發條件生成事件tap,該事件處理函數會被執行,同時還會收到一個事件對象`event` | 類型 | 觸發條件 | 最低版本 | | --- | --- | --- | | touchstart | 手指觸摸動作開始 | | | touchmove | 手指觸摸后移動 | | | touchcancel | 手指觸摸動作被打斷,如來電提醒,彈窗 | | | touchend | 手指觸摸動作結束 | | | tap | 手指觸摸后馬上離開 | | | longpress | 手指觸摸后,超過350ms再離開,如果指定了事件回調函數并觸發了這個事件,tap事件將不被觸發 | [1.5.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | longtap | 手指觸摸后,超過350ms再離開(推薦使用 longpress 事件代替) | | | transitionend | 會在 WXSS transition 或 wx.createAnimation 動畫結束后觸發 | | | animationstart | 會在一個 WXSS animation 動畫開始時觸發 | | | animationiteration | 會在一個 WXSS animation 一次迭代結束時觸發 | | | animationend | 會在一個 WXSS animation 動畫完成時觸發 | | | touchforcechange | 在支持 3D Touch 的 iPhone 設備,重按時會觸發 | [1.9.90](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | 5. 某些組件會有自己特性的事件類型,比如**input**有**bindinput/bindblur/bindfocus**等,**scroll-view**有**bindscrolltowpper/bindscrolltolower**等 >[danger] ##### 簡單案例 * index.wxml ~~~html <!-- 使用 tap 手指觸摸后馬上離開(等同于click點擊) --> <view bindtap="tapAddCount"> tap 點擊事件 {{count}} </view> ~~~ * index.js ~~~js Page({ /** * 頁面的初始數據 */ data: { count:0, }, tapAddCount(){ let count = ++ this.data.count this.setData({ count:count }) } }) ~~~ >[info] ## 事件中的event 對象 1. 當某個事件觸發時, 會產生一個事件對象, 并且這個對象被傳入到回調函數中 ![](https://img.kancloud.cn/d6/fd/d6fdec1b81b52d18cd342c3e404552ef_695x241.png) | 屬性 | 類型 | 說明 | 基礎庫版本 | | --- | --- | --- | --- | | [type](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#type) | String | 事件類型 | | | [timeStamp](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#timeStamp) | Integer | 事件生成時的時間戳 | | | [target](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#target) | Object | 觸發事件的組件的一些屬性值集合 | | | [currentTarget](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#currenttarget) | Object | 當前組件的一些屬性值集合 | | | [mark](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#mark) | Object | 事件標記數據 | [2.7.1](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | >[danger] ##### currentTarget和target 屬性說明 1. `target `作為觸發事件的元素 2. `currentTarget` 作為處理事件的元素,從這取值最靠譜 * 在非冒泡的情況下 二者是一樣的,下面打印結果都為`t` ~~~html <!-- currentTarget和target 在非冒泡的情況下 --> <view bindtap="tapTarget" id="t"> currentTarget和target </view> ~~~ ~~~js Page({ tapTarget(e){ const tId = e.target.id const cId = e.currentTarget.id console.log(tId) // t console.log(cId) // t } }) ~~~ * 冒泡觸發的情況下 ![](https://img.kancloud.cn/48/a9/48a9380516b68e2db3428755c84970d9_246x214.png) ~~~ <!-- 冒泡情況下 currentTarget和target--> <view id="outter" bindtap="tapTarget" style="height: 200px;width:200px;background-color: red;display: flex;justify-content: center;align-items: center;" > <view id="inner" style="height: 50px;width:50px;background-color: yellowgreen;"> </view> </view> ~~~ ~~~js Page({ tapTarget(e){ const tId = e.target.id const cId = e.currentTarget.id console.log(tId) // inner console.log(cId) // outter } }) ~~~ >[danger] ##### touches和changedTouches的區別 1. `touches `當前屏幕上所有觸摸點的列表 2. `changedTouches` 觸發事件時改變的觸摸點的集合 ![](https://img.kancloud.cn/48/d9/48d95e2965b291d9389d5c08496e2c29_627x459.png) >[info] ## 事件參數的傳遞 1. 當視圖層發生事件時,某些情況需要事件攜帶一些參數到執行的函數中, 這個時候就可以通過`data-`屬性來完成 2. 獲取:`e.currentTarget.dataset.屬性的名稱` 來獲取 3. 在 WXML 中,這些自定義數據以`data-`開頭,多個單詞由連字符`-`連接。這種寫法中,連字符寫法會轉換成駝峰寫法,而大寫字符會自動轉成小寫字符。如: * `data-element-type`,最終會呈現為`event.currentTarget.dataset.elementType`; * `data-elementType`,最終會呈現為`event.currentTarget.dataset.elementtype` >[danger] ##### 案例一 ~~~html <!-- 事件觸發案例 --> <button bindtap="getParams" data-name="w" data-age="12"> 點擊傳參 </button> ~~~ ~~~ Page({ getParams(e){ const {name,age} = e.currentTarget.dataset console.log(name,age) // w 12 } }) ~~~ >[danger] ##### 案例二 ![](https://img.kancloud.cn/10/d3/10d34f998615ce580cf5a91f99db07dd_465x67.png) ~~~html <!-- 做一個tab 切換 --> <view class="tab"> <block wx:for="{{tabs}}" wx:key="item"> <view class="tab-item" bindtap="tapTab" data-index="{{index}}"> <text class="tab-item-text {{ index==tabIndex? 'active':''}}">{{item}}</text> </view> </block> </view> ~~~ * index.js ~~~ Page({ data: { tabs:["數學","語文","英語","物理"], tabIndex:0 }, tapTab(e){ const {index} = e.currentTarget.dataset this.setData({ tabIndex:index }) }, }) ~~~ * index.wxss ~~~ .tab{ display: flex; line-height: 32px; height: 32px; } .tab-item{ flex: 1; text-align: center; } .tab-item-text{ padding: 5px; } .tab-item-text.active{ border-bottom: 2px solid yellowgreen; } ~~~ >[info] ## 事件冒泡 1. 使用`bind` 去綁定事件會產生事件冒泡,如果想產生的是事件捕獲可以用`capture-bind`綁定事件 ![](https://img.kancloud.cn/7e/da/7edaf757ee1aed319e7d6867fe34dacd_922x714.png) 2. 使用 `mark` 屬性獲取冒泡上的所有值,事件冒泡路徑上所有的`mark`會被合并,并返回給事件回調函數。(即使事件不是冒泡事件,也會`mark`。) ![](https://img.kancloud.cn/0e/62/0e62f0dc5d5c1581a669830b0bc6ebb7_396x33.png) ~~~html <view mark:myMark="last" bindtap="bindViewTap"> <button mark:anotherMark="leaf" bindtap="bindButtonTap">按鈕</button> </view> ~~~ ~~~js Page({ bindViewTap: function(e) { console.log( e.mark ) }, bindButtonTap(){}, }) ~~~ >[danger] ##### 案例 ~~~html <view class="view1" capture-bind:tap="onView1CaptureTap" bindtap="onView1Tap"> <view class="view2" capture-bind:tap="onView2CaptureTap" bindtap="onView2Tap"> <view class="view3" capture-bind:tap="onView3CaptureTap" bindtap="onView3Tap"></view> </view> </view> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看