小程序--API

• 页面下拉刷新的两种方法
  1. 配置json
     • 在需要实现下拉刷新的页面配置xxx.json

        {
             // 是否开启下拉刷新
             "enablePullDownRefresh": true,
             //下拉背景字体、loading 图的样式，仅支持 dark/light，默认light不可见 
             "backgroundTextStyle": "dark",
             //页面上拉触底事件触发时距页面底部距离，单位为px
             "onReachBottomDistance": 50
         }
     

     • js 文件定义监听事件，完成后收起下拉刷新
       在Page 中定义onPullDownRefresh 处理函数，监听该页面用户下拉刷新事件

           onPullDownRefresh() {
                 // doing some thing
                 // 下拉刷新执行完毕要停止当前页面下拉刷新
                 setTimeout(function() {
                       wx.stopPullDownRefresh()
                 }, 1000)
           }
     

  2. 使用wx.startPullDownRefresh(Object object) 、wx.stopPullDownRefresh(Object object)
     • wx.startPullDownRefresh() 开始下拉刷新，调用后出发下拉刷新动画，效果与用户手动下拉刷新一致
     • wx.stopPullDownRefresh() 停止当前页面下拉刷新。
     • 参数
       • success 接口调用成功的回调
       • fail 接口调用失败的回调
       • complete 接口结束时的回调函数

         wx.startPullDownRefresh({
               success: () => {}
               fail: () => {}
               complete: () => {}
         })
     

  ⚠️下拉刷新中使用wx.showToast等交互反馈，会导致反弹距离过大
  • 数据绑定
    WXML中的动态数据均来自对应Page的data

    • 数据绑定使用 Mustache 语法 （双大括号）将变量包起来。
      1. 组件属性
      
      2. 控制属性
      
      3. 关键字
      

    • 运算
      可以在 {{}} 内 进行简单的运算，支持的方式
      1. 三元运算
      
      2. 算数运算
      {{a + b}} + {{ c }} + d
      3. 逻辑判断
      
      4. 字符串运算
      {{"hello" + name}}
      5. 数据路径运算
      {{object.key}} {{array[0]}}

    • 列表渲染 wx:for

      • 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
      • 使用 wx: for-item 可指定数组当前元素的变量名
        使用wx:for-index 可指定数组当前下标的变量名
      • wx:for 可以嵌套
      • block wx:for
        类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块
      • wx:key 的值以两种形式提供
        1. 字符串， 代表在for 循环的array中的某个property， 该property 的值需要的是列表中唯一的字符串或数字，且不能动态改变。
        2. 保留关键字 *this 代表在for 循环中的item 本身，这种表示需要item 本身是一个唯一的字符串或者数字

      当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

      不提供 wx:key，会报一个 warning， 如果列表是静态，或者不必关注其顺序，可以选择忽略

    • 条件渲染 wx:if

      • wx:if="{{condition}}" 来判断是否需要渲染该代码块
      • wx:elif 和 wx:else 来添加一个 else 块：
        ⚠️ 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性