wxc-result

Weex 通用错误结果页，主要包括通用错误、无商品、无网络、定位错误的错误情况

规则

  • 用于出错的页面，减少用户焦虑感
  • 配置 type.js#L5 来定制化

Demo

wxc-result 结果页 - 图1 wxc-result 结果页 - 图2

使用方法

  1. <template>
    2.   <wxc-result type="errorPage"
    3.               :show="show"
    4.               padding-top="232"
    5.               @wxcResultButtonClicked="wxcResultButtonClicked"></wxc-result>
    6. </template>
    7. <script>
    8.   import { WxcResult } from 'weex-ui';
    9.   export default {
    10.     components: { WxcResult },
    11.     data: () => ({
    12.         show: true
    13.     }),
    14.     methods: {
    15.       wxcResultButtonClicked(e){
    16.       // e.type即错误页面类型，可以在这里做对应操作
    17.         modal.toast({
    18.           'message': e.type,
    19.           'duration': 1,
    20.         })
    21.       }
    22.     }
    23.   };
    24. </script>Click to copy

更详细代码可以参考 demo

可配置参数

Prop Type Required Default Description
type String N errorPage errorPage、noNetwork、noGoods、errorLocation
show Boolean N true 是否显示
padding-top Number N 240 图案距离顶部高度
custom-set Object N {} 自定义覆盖 type.js#L4
wrap-style Object N {} 外层 wrap 样式自定义
### 自定义配置案例
1. this.customSet={errorPage: { button: null, desc: '可以减少筛选内容试试', content: '抱歉主人，没有找到合适条件的推荐' }}Click to copy

事件回调

  1. @wxcResultButtonClicked="wxcResultButtonClicked"Click to copy

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-result/