小程序开发需要掌握的基础知识

一、事件是否为冒泡事件

1.冒泡事件：当一个组件的事件被触发后，事件会向父节点传递

2.非冒泡事件：当一个组件的事件被触发之后，该事件不会向父节点传递

bind绑定事件不会阻止冒泡事件向上传递，catch绑定事件可以阻止冒泡事件向上传递

二、获取元素上的属性节点

currentTarget：事件绑定的当前组件

target：触发事件的源组件

获取data-a和data-b里的值

<view data-a="1" data-b="2" bindtap="bindViewTap"> DataSet Test </view>

利用event.currentTarget.dataset

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.a === 1 
    event.currentTarget.dataset.b === 2 
  }
})

通过event.target.dataset.postid

<swiper catchtap="onSwiperTap" >
    <swiper-item>
        <image id="7" src="/images/wx.png" data-postId="3"></image>
    </swiper-item>
    <swiper-item>
        <image src="/images/vr.png" data-postId="4"></image>
    </swiper-item>
</swiper>

target指的是当前点击的组件和currentTarget 指的是事件捕获的组件，target这里指的是image，而currentTarget指的是swiper

三、底部tab的设置

在文件app.json添加tabBar

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
  }
}

四、上拉加载，下拉刷新

在page（）里面有两个对象参数可以监听用户的下拉动作和页面的上拉触底动作；

onPullDownRefresh：监听用户的下拉动作

onReachBottom：页面上拉触底事件

在相对应的json文件中添加，也可以在app.json里面设置

"enablePullDownRefresh": true,

设置这个可以看到刷新的动画

"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"

接下来就可以在onPullDownRefresh和onReachBottom里写相应的代码；

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

    wx.showNavigationBarLoading() //显示顶部的刷新的图标
    console.log("用户实现下拉");
    // 隐藏导航栏加载框
    wx.hideNavigationBarLoading();
    // 停止下拉动作
    wx.stopPullDownRefresh();

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("用户实现上拉");
    // 显示加载图标
    wx.showLoading({
      title: '玩命加载中',
    });
    setTimeout(function(){
      // 隐藏加载框
      wx.hideLoading()
    },1000)
  
  }

小程序开发需要掌握的基础知识

猜你喜欢