finclip开发分享——事件绑定

什么是事件？

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理

finclip中常用的事件有哪些？

触摸点击事件 bind:tap、bind:input、bind:change（bindtap、bindinput、bindchange）

bindtap是指我们的用户点击某个组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view bindtap="onSwitchTab" class="artwork-tab bg-color-{{item.className}} {{item.active?'artwork-tab-active':''}}" data-brand="{{brandType}}" data-categoryid="{{item.category_id}}" wx:for="{{artworkTabs}}" wx:for-index="tab_index" wx:key="j" style="background:{{item.color}};">
            <view class="artwork-tab-item-title">{{item.category_title}}</view>
            <view class="artwork-tab-item-subtitle">{{item.category_slogan}}</view>
        </view>

• 在相应的js定义中写上相应的事件处理函数，参数是t。

onSwitchTab: function(t) {
        wx.navigateTo({
            url: "/pages/product-detail/product-detail?category_id=" + a + "&type=nj",
            success: function(t) {},
            fail: function(t) {},
            complete: function(t) {}
        });
        
        var a = t.currentTarget.dataset.categoryid;
        wx.navigateTo({
            url: "/pages/product-detail/product-detail?category_id=" + a + "&type=nj",
            success: function(t) {},
            fail: function(t) {},
            complete: function(t) {}
        });
    },

bindinput    是在用户键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，将替换输入框的内容。

 <view class="authcode-raw-input">
                <input bindinput="rawInputHandler" type="number" value="{{rawInputValue}}"></input>
 </view>
<view class="send-again">没收到验证短信？<text bindtap="sendAgain">重发验证码</text> </view>

在我们的js中定义以下方法

 rawInputHandler: function(t) {
            var e = t.detail.value, n = e.length > 4 ? e.substring(0, 4) : e;
            this.setData({
                rawInputValue: n,
                code1: n.substr(0, 1),
                code2: n.substr(1, 1),
                code3: n.substr(2, 1),
                code4: n.substr(3, 1)
            });
        },

bindchange为用户输入框发生改变事件。开发中我们目前是失去焦点才能触发到此事件的发生。

    <view class="weui-cell weui-cell_input">
                    <view class="weui-cell__hd">
                        <view class="weui-label">性别</view>
                    </view>
                    <view class="weui-cell__bd radio-group weui-input">
                        <radio-group bindchange="bindRadioChange">
                            <label class=" weui-check__label" wx:for="{{radioItems}}" wx:key="value">
                                <radio checked="{{item.checked}}" class="weui-check" name="宝宝性别" value="{{item.value}}"></radio>
                                <view class="weui-cell__hd weui-check__hd_in-checkbox">
                                    <icon class="weui-icon-checkbox_circle" size="23" type="circle" wx:if="{{!item.checked}}"></icon>
                                    <icon class="weui-icon-checkbox_success" size="23" type="success" wx:if="{{item.checked}}"></icon>
                                </view>
                                <view class="weui-label">{{item.name}}</view>
                            </label>
                        </radio-group>
                    </view>
                </view>

在js中我们也需要定义bindRadioChange

 bindRadioChange: function(a) {
        console.log("radio发生change事件，携带value值为：", a.detail.value);
        for (var e = this.data.radioItems, i = 0, o = e.length; i < o; ++i) e[i].checked = e[i].value == a.detail.value;
        this.setData({
            radioItems: e,
            "form.child.gender": a.detail.value
        });
    },