04微信小程序-视图与逻辑2

wx:if

• 在小程序中，使用 wx:if="{{condition}}"来判断是否需要渲染该代码块
• 也可以用 wx:elif 和 wx:else 来添加一个 else 块

<view wx:if='{{id < 10}}'>JavaScript</view>
<view wx:elif='{{id == 10}}'>HTML</view>
<view wx:else='{{id > 10}}'>CSS</view>

block wx:if

• 因为 wx:if 是一个控制属性，需要将它添加到一个标签上。
• 如果要一次性判断多个组件标签，可以使用一个 <block></block> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
• <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

<block wx:if='{{ id == 10 }}'>
  <view>JavaScript</view>
  <view>HTML</view>
  <view>CSS</view>
</block>

hidden

• 在小程序中，直接使用 hidden="{{condition}}" 也能控制元素的显示与隐藏：

<view hidden="{{condition}}"> 条件为 true 隐藏，条件为 false 显示 </view>

wx:if 与 hidden 的对比

• 被 wx:if 控制的区域，框架有一个局部渲染的过程，会根据控制条件的改变，动态创建或销毁对应的 UI结构。
• wx:if 是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
• 相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
• 总结：wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

---

wx:for

• 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
• 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

<view wx:for='{{ arr }}' wx:key='index'>
  我是{{ item }} -- 索引是 {{ index }}
</view>

block wx:for

wx:for 可以用在 <block></block> 标签上，以渲染一个包含多节点的结构块。

<block wx:for='{{ arr }}' wx:key='index'>
  <view>值：{{item}} -- 索引{{index}}</view>
</block>

手动指定索引和当前项的变量名

• 使用 wx:for-item 可以指定数组当前元素的变量名
• 使用 wx:for-index 可以指定数组当前下标的变量名

<view wx:for='{{ arr }}' wx:for-item='foritem' wx:for-index='forindex' wx:key='index'>
  我是{{ foritem }} -- 索引是 {{ forindex }}
</view>

列表渲染中的 key

01.wx:key的作用说明

• 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<checkbox/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
• 当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

2. key 值的注意点

• key 值必须具有唯一性，且不能动态改变
• key 的值必须是数字或字符串
• 保留关键字 *this 代表在 for 循环中的 item 本身，它也可以充当 key 值，但是有以下限制：需要 item 本身是一个唯一的字符串或者数字。
• 如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

下拉刷新

• 1. 下拉刷新的概念及应用场景
     概念：下拉刷新是移动端更新列表数据的交互行为，用户通过手指在屏幕上自上而下的滑动，可以触发页面的下
     拉刷新，更新列表数据。
     应用场景：在移动端，数据列表是常见的页面效果，更新列表数据是最基本的页面需求，相比于按钮刷新、定时
     刷新来说，下拉刷新的用户体验方便友好，已经成为移动端刷新列表数据的最佳解决方案。
• 2. 启用下拉刷新
     ① 需要在 app.json 的 window 选项中或页面配置中开启 enablePullDownRefresh。但是，一般情况下，推
     荐在页面配置中为需要的页面单独开启下拉刷新行为。
     ② 可以通过 wx.startPullDownRefresh() 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷
     新一致。
• 3. 配置下拉刷新窗口的样式
     需要在 app.json 的 window 选项中或页面配置中修改 backgroundColor 和 backgroundTextStyle 选项。
• backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16进制颜色值
• backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light
• 4. 监听页面的下拉刷新事件
     为页面添加 onPullDownRefresh() 函数，可以监听用户在当前页面的下拉刷新事件。

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
onPullDownRefresh: function () {
  console.log('触发下拉刷新啦')
}

• 5. 停止下拉刷新效果
     当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的
     loading 效果。此时，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
onPullDownRefresh: function () {
  console.log('触发下拉刷新啦')
    
  wx.stopPullDownRefresh()
}

上拉加载更多

• 1. 上拉加载更多的概念及应用场景
• 概念：在移动端，随着手指不断向上滑动，当内容将要到达屏幕底部的时候，页面会随之不断的加载后续内容，直到没有新内容为止，我们称之为上拉加载更多。上拉加载更多的本质就是数据的分页加载。
• 应用场景：在移动端，列表数据的分页加载，首选的实现方式就是上拉加载更多。
• 2.设置上拉刷新的距离
• 在 app.json 的 window选项中或页面配置中设置触底距离 onReachBottomDistance。单位为px，默认触底距离为 50px。
• 为页面添加 onReachBottom() 函数，可以监听用户在当前页面的上拉触底事件，从而实现上拉加载更多列表数据的效果。

/**
 * 页面上拉触底事件的处理函数
 */
onReachBottom: function () {
  console.log('触发上拉刷新啦')
},

页面滑动事件onPageScroll

• 监听用户滑动页面事件
• 得到 scrollTop，页面在垂直方向已滚动的距离（单位px）

onPageScroll: function (e) {
  console.log(e)
}

分享事件 onShareAppMessage

• 监听用户点击页面内转发按钮（<button> 组件 open-type="share"）
• 右上角菜单“转发”按钮的行为，并自定义转发内容。

参数	类型	说明
from	String	转发事件来源。button：页面内转发按钮；menu：右上角转发菜单
target	Object	如果 from 值是 button，则 target 是触发这次转发事件的 button，否则为 undefined
webViewUrl	String	页面中包含<web-view>组件时，返回当前<web-view>的url

• 自定义转发内容， return 一个 Object 就可以

字段	说明	默认值
title	转发标题	当前小程序名称
path	转发路径	当前页面 path ，必须是以 / 开头的完整路径
imageUrl	自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。	使用默认截图

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }
})

点击 tab 时触发事件 onTabItemTap

参数	类型	说明
index	String	被点击 tabItem 的序号，从0开始
pagePath	String	被点击tabItem 的页面路径
text	String	被点击 tabItem 的按钮文字

onTabItemTap(item) {
  console.log(item.index)
  console.log(item.pagePath)
  console.log(item.text)
}