Prompt 提示信息

用于展现异常流提示信息。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Prompt",
  3. "usingComponents": {
  4. "wux-prompt": "../../dist/prompt/index"
  5. }
  6. }

示例

  1. <view class="page">
  2. <view class="page__bd">
  3. <view class="weui-tab">
  4. <view class="weui-navbar">
  5. <block wx:for-items="{{ tabs}}" wx:key="{{ index }}">
  6. <view data-id="{{ index }}" class="weui-navbar__item {{ activeIndex == index ? 'weui-bar__item_on' : '' }}" bindtap="tabClick">
  7. <view class="weui-navbar__title">{{ item }}</view>
  8. </view>
  9. </block>
  10. <view class="weui-navbar__slider" style="left: {{ sliderLeft }}px; transform: translateX({{ sliderOffset }}px); -webkit-transform: translateX({{ sliderOffset }}px);"></view>
  11. </view>
  12. <view class="weui-tab__panel">
  13. <view class="weui-tab__content" hidden="{{ activeIndex !== 0 }}">
  14. <wux-prompt visible="{{ activeIndex === 0 }}" title="{{ msg1.title }}" text="{{ msg1.text }}" />
  15. </view>
  16. <view class="weui-tab__content" hidden="{{ activeIndex !== 1 }}">
  17. <wux-prompt visible="{{ activeIndex === 1 }}" icon="{{ msg2.icon }}" title="{{ msg2.title }}" text="{{ msg2.text }}" buttons="{{ msg2.buttons }}" bind:click="buttonClicked" />
  18. </view>
  19. <view class="weui-tab__content" hidden="{{ activeIndex !== 2 }}">
  20. <wux-prompt visible="{{ activeIndex === 2 }}" icon="{{ msg3.icon }}" title="{{ msg3.title }}" />
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. </view>
  1. const sliderWidth = 96
  2. Page({
  3. data: {
  4. tabs: ['全部', '待收货', '待评价'],
  5. activeIndex: 0,
  6. sliderOffset: 0,
  7. sliderLeft: 0,
  8. msg1: {
  9. title: '空空如也',
  10. text: '暂时没有相关数据',
  11. },
  12. msg2: {
  13. icon: '../../assets/images/iconfont-order.png',
  14. title: '您还没有相关的订单',
  15. text: '可以去看看有哪些想买',
  16. buttons: [{
  17. text: '随便逛逛',
  18. }],
  19. },
  20. msg3: {
  21. icon: '../../assets/images/iconfont-empty.png',
  22. title: '暂无待评价订单',
  23. },
  24. },
  25. onLoad() {
  26. this.getSystemInfo()
  27. },
  28. getSystemInfo() {
  29. const that = this
  30. wx.getSystemInfo({
  31. success(res) {
  32. that.setData({
  33. sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
  34. })
  35. }
  36. })
  37. },
  38. tabClick(e) {
  39. const { offsetLeft, dataset } = e.currentTarget
  40. const { id } = dataset
  41. this.setData({
  42. sliderOffset: offsetLeft,
  43. activeIndex: id,
  44. })
  45. },
  46. buttonClicked(e) {
  47. console.log(e)
  48. },
  49. })

视频演示

Prompt

API

Prompt props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-prompt
classNames any 过渡的类名,更多内置过渡效果请参考 AnimationGroup wux-animate—fadeIn
icon string 图标 -
title string 标题 -
text string 文本 -
buttons array 按钮 []
buttons[].text string 按钮的文本 -
visible boolean 是否显示组件 false
bind:click function 按钮点击事件 -