当前位置: 首页 > 文档资料 > Weex UI 中文文档 >

wxc-result

优质
小牛编辑
125浏览
2023-12-01

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

规则

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

Demo

使用方法

<template>
  <wxc-result type="errorPage"
              :show="show"
              padding-top="232"
              @wxcResultButtonClicked="wxcResultButtonClicked"></wxc-result>
</template>
<script>
  import { WxcResult } from 'weex-ui';
  export default {
    components: { WxcResult },
    data: () => ({
        show: true
    }),
    methods: {
      wxcResultButtonClicked(e){
      // e.type即错误页面类型,可以在这里做对应操作
        modal.toast({
          'message': e.type,
          'duration': 1,
        })
      }
    }
  };
</script>

更详细代码可以参考 demo

可配置参数

PropTypeRequiredDefaultDescription
typeStringNerrorPageerrorPage、noNetwork、noGoods、errorLocation
showBooleanNtrue是否显示
padding-topNumberN240图案距离顶部高度
custom-setObjectN{}自定义覆盖 type.js#L4
wrap-styleObjectN{}外层 wrap 样式自定义

自定义配置案例

this.customSet={errorPage: { button: null, desc: '可以减少筛选内容试试', content: '抱歉主人,没有找到合适条件的推荐' }}

事件回调

@wxcResultButtonClicked="wxcResultButtonClicked"