用户界面交互 UI

UI操作会挂起进程，注意语句的执行顺序会被打乱
更多 API，请访问官方文档 - API - 界面

wx.showToast(Object object)

显示消息提示框
title - 提示信息
icon - 提示图标；系统内置，数量教少
image - 自定义图片；使用后配置项 icon 无效
mask - 默认为 false；建议开启，增加透明遮罩层，避免事件穿透
success - 成功后的回调函数
fail - 识别后的回调函数
complete - 完成后的回调函数
修改昵称后，延时1秒返回上级

wx.showToast({
  title: '用户昵称修改成功',
  success: () => {
    setTimeout(() => {
      wx.navigateBack({
        delta: 1,
        success: (res) => {},
        fail: (res) => {},
        complete: (res) => {},
      })
    }, 1000)
  }
})

wx.hideToast(Object object)

. 隐藏消息提示框

wx.showLoading(Object object)

. 显示 loading 提示框

wx.hideLoading(Object object)

. 隐藏 loading 提示框

wx.showModal(Object object)

显示模态对话框；通过判断 res.confirm 还是 res.cancel 确定下一步操作
title - 提示标题
content - 提示内容
editable - 可编辑；确认后在返回结果 res的 content 中获取
placeholderText - 占位符，显示输入框时的提示文本，此时 content 相当于值

[] 使用编辑 editable 和占位 placeholderText 提供交互 - 修改个人信息

优点：不用页面跳转；不用专门创建页面

wx.showModal({
    title: 'rename',
    content: this.data.user.uname,
    editable: true,
    placeholderText: '8 chars',
    complete: (res) => {
        if (res.cancel) {
            console.log('cancel', res);
        }
        if (res.confirm) {
            console.log('confirm', res);
            this.setData({
                'user.uname': res.content
            })
        }
    }
})

wx.showActionSheet(Object object)

可以看作是 radio / picker 的一种拓展
显示操作菜单；在事件对象 res 获取选中的列表 tapIndex
alertText - 提示文案
itemList - 待选列表项，长度最大为6

[] 选择性别

页面提供的 gender 数据，不直接参与页面渲染，可以作为静态数据声明
alertText 用来给出提示信息
数据更新：全局状态、本地存储

data: {
    userInfo: {
        userGender: 'Male',
    },    
}
gender: ['Male', 'Female']

chooseGender() {
  wx.showActionSheet({
    alertText: '性别选择',
    itemList: ['Male', 'Female'],
    success: (res) => {
      let userInfo = this.data.userInfo
      userInfo.userGender = this.gender[res.tapIndex]
      // 全局更新
      app.globalData.userInfo = userInfo
      // 本地存储同步更新
      wx.setStorageSync('userInfo', userInfo)
      this.setData({
        userInfo
      })
    },
    fail: (e) => {
      wx.showToast({
        title: '请稍后再试',
      })
    },
    complete: () => {
      wx.showToast({
        title: '性别选择完毕',
      })
    }
  })
}

导航栏 Navigation bar

标签栏 TabBar

wx.showTabBarRedDot(Object object)

. 显示 tabBar 某一项的右上角的红点

. 与之对应的隐藏 wx.hideTabBarRedDot(Object object)

wx.showTabBar(Object object)

. 显示 tabBar

. 与之对应的隐藏 wx.hideTabBar(Object object)

wx.setTabBarBadge(Object object)

为 tabBar 某一项的右上角添加文本；字符串类型；数字必须显示的转换为字符串
与之对应的移除 wx.removeTabBarBadge(Object object)

[] 显示购物车商品数量

wx.setTabBarBadge({
  index: 1,
  text: String(carts.length),
  success: res => console.log(res),
  fail: err => console.log(err),
  complete: () => console.log('done')
})

下拉刷新 PullDownRefresh

滚动 Scroll

. 实现页面或部分内容的滚动

wx.pageScrollTo(Object object)

将页面滚动到目标位置，支持选择器和滚动距离两种方式定位；2选1
深层嵌套中，配合 wx.createSelectorQuery() 获取节点信息，实现更精确的滚动定位

pageScrollTo常用属性
item	desc
scrollTop	滚动到页面的目标位置；单位 px
duration	滚动动画时长；单位 ms；默认300
selector	选择器；仅仅支持ID、类、后代、并列等基本选择器
offsetTop	偏移距离，需要搭配 selector 参数使用，可以滚动到 selector 加偏移距离的位置，单位 px

[] 返回顶部 - 到页面0的位置；使用距离

将某个元素固定定位 - fixed 在页面底部并绑定事件

wx.pageScrollTo({
    scrollTop: 0,
    duration: 300,
    success: res => console.log(res),
    fail: err => console.log(err),
    complete: () => console.log('scroll done')
})

[] 页面滚动到某个元素 - 使用选择器

页面结构 wxml

<view class="wrap">
    <view class="header"></view>
    <view class="nav"></view>
    <view class="cont"></view>
    <view class="footer"></view>
    <view class="backToNav" bind:tap="toNav">返回主菜单</view>
</view>

页面逻辑 js

toNav(){
    wx.pageScrollTo({
        selector:'.nav',
        // offsetTop: 100, // 返回到距离元素顶部100px的位置
        duration: 300,
        success: res => console.log(res),
        fail: err => console.log(err),
        complete: () => console.log('scroll done')
    })
}

[] 美食地图 - 增加导航菜单，分类美食，单击菜单跳转到对应的分类

用户界面交互