wxc-cell

Weex 单元格组件，可用作展示列表信息、链接或者表单等

规则

• 一般由主要信息、操作动作组成，信息在左、操作在右
• 可以对 label, title, value 进行 slot 覆盖

Demo

使用方法

  1. <template>
    2.   <div class="container">
    3.     <div class="demo">
    4.       <text class="demo-title">列表list展示</text>
    5.   6.       <wxc-cell label="标题"
    7.                 title="Weex Ui"
    8.                 :has-arrow="true"
    9.                 @wxcCellClicked="wxcCellClicked"
    10.                 :has-margin="true"></wxc-cell>
    11.   12.       <wxc-cell label="标题"
    13.                 title="带链接"
    14.                 :has-arrow="true"
    15.                 link="https://h5.m.taobao.com/trip/home/index.html"
    16.                 @wxcCellClicked="wxcCellClicked"
    17.                 spm="181.12312312.12312.d01"
    18.                 :has-top-border="false"></wxc-cell>
    19.   20.       <wxc-cell label="标题"
    21.                 title="Weex Ui"
    22.                 :has-arrow="true"
    23.                 @wxcCellClicked="wxcCellClicked"
    24.                 :has-top-border="false"></wxc-cell>
    25.   26.     </div>
    27.     <div class="demo">
    28.       <text class="demo-title">不配置label</text>
    29.       <wxc-cell title="标题"
    30.                 :has-arrow="true"
    31.                 @wxcCellClicked="wxcCellClicked"
    32.                 :has-top-border="true"></wxc-cell>
    33.     </div>
    34.   35.     <div class="demo">
    36.       <text class="demo-title">配置附加信息</text>
    37.       <wxc-cell title="标题"
    38.                 desc="这里是附加信息"
    39.                 :has-arrow="true"
    40.                 @wxcCellClicked="wxcCellClicked"
    41.                 :has-top-border="true"></wxc-cell>
    42.     </div>
    43.   44.     <div class="demo">
    45.       <text class="demo-title">不显示箭头</text>
    46.       <wxc-cell title="标题"
    47.                 :has-arrow="false"
    48.                 @wxcCellClicked="wxcCellClicked"
    49.                 :has-top-border="true"></wxc-cell>
    50.     </div>
    51.     <div class="demo">
    52.       <text class="demo-title">自定义子元素</text>
    53.       <wxc-cell title="这里是标题"
    54.                 :has-arrow="false"
    55.                 :has-top-border="true">
    56.         <switch slot="value"></switch>
    57.       </wxc-cell>
    58.     </div>
    59.   </div>
    60. </template>
    61.   62. <script>
    63.   import { WxcCell } from 'weex-ui';
    64.   export default {
    65.     components: { WxcCell },
    66.     methods: {
    67.       wxcCellClicked (e) {
    68.         console.log(e)
    69.       }
    70.     }
    71.   };
    72. </script>Click to copy

更详细代码可以参考 demo

可配置参数

  1. //点击事件回调  `@wxcCellClicked="wxcCellClicked"`Click to copy

Please feel free to use and contribute to the development.

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