wxc-cell使用

如图。这是官网提供的Demo。

一个常规的wxc-cell由三部分组成：

1. 左侧的label。例如上面写着“标题”的区域。

2. 中间的title。例如上面写着“文字内容”、“带链接”等的区域。

3. 右侧的value。例如上面右侧的小箭头，以及checkbox。

任何一部分都可以为空。

一．使用：

1. 将WxcCell引入，注意是用驼峰命名：

import { WxcCell } from 'weex-ui'

components: { WxcCell}

2. 引用WxcCell，注意是用全小写+横线的形式：

<wxc-cell label="左侧文本"title="中间文本"desc="title下方显示说明信息"link="http://www.baidu.com":arrow-icon="arrawSrc":has-arrow="true":has-top-border="true":has-bottom-border="true":has-vertical-indent="true":has-margin="true":cell-style="cellStyle":extraContent="infoInData">
</wxc-cell>

对应的data为：

data: function() {return {arrawSrc: "http://iconfont.alicdn.com/t/1489455806593.png@100h_100w.jpg",infoInData: "data中的信息",cellStyle: {backgroundColor: "#00f3f3",height: "200px"}}
}

其中：

① 有的属性需要直接设置，例如label；有的属性需要用v-bind:形式来设置，例如has-arrow。基本原则是，不需要引用data变量的直接设置；需要引用data变量的用v-bind来设置。布尔值必须用v-bind来设置。

② arrow-icon为右侧图标的src，需要定义一个data属性来引用。需要配置一个可访问的图标地址。

③ cell-style是整个cell外围<div>的样式，需要定义一个data属性来引用。对于所有div可生效的样式，均可用在这里。

④ extraContent为附加内容，需要定义一个data属性来引用。

上面的例子，效果如下：

二．自定义点击事件

<wxc-cell label="左侧文本"title="中间文本"desc="title下方显示说明信息":has-arrow="true"link="http://www.baidu.com" @wxcCellClicked="wxcCellClicked">
</wxc-cell>

对应的methods：

methods: {wxcCellClicked() {console.log("自定义点击");}
}

注意点击事件与link并不冲突。点击整个cell时，会先触发自定义的点击事件，然后触发link。

三． slot

wxc-cell支持3个slot：

1. <slot name="label"></slot>：label卡槽，替换默认 label 占位。

2. <slot name="title"></slot>：title卡槽，替换默认 title 占位。

3. <slot name="value"></slot>：右边卡槽，有需要传入输入框、checkbox的场景。

例如，要自定义label和title：

<wxc-cell label="左侧文本"
          title="中间文本"
          desc="title下方显示说明信息"
          :has-arrow="true"
          link="http://www.baidu.com"
          @wxcCellClicked="wxcCellClicked">
    <text slot="label" style="color: red;">新的左侧文本</text>
    <text slot="title" style="color: green;">新的中间文本</text>
</wxc-cell>

注意slot属性要设置正确。

效果如下：

注意原始的label属性与title属性都被覆盖了。

desc属性由于依附于原始的title属性，因此也会被覆盖。

wxc-cell使用相关推荐

使用自定义的Layer和Cell实现手写汉字生成（Tensorflow2）
前言本文是对Zhang XuYao等的大作Drawing and Recognizing Chinese Characters with Recurrent Neural Network的简化复现. ...
java操作跨页的word cell,“excle如何打印不出现断行“EXCEL中，如何不跨页断行打印或显示，谢谢...
EXCEL中,如何不跨页断行打印或显示,谢谢打印预览--页面设置--工作表--网格线(打勾) 试试! java导入excel 判断当前行有没有数据工作中用到入excel一个方法,你还可以通过一些插 ...
ios 如何在cell中去掉_IOS之表视图单元格删除、移动及插入
1.实现单元格的删除,实现效果如下 - (void)viewDidLoad { [super viewDidLoad]; //设置导航栏 self.editButtonItem.title = @&q ...
What is acceptable cell and suitable cell in LTE?
The difference between acceptable cell and suitable cell in LTE is given below. acceptable cell In a ...
Cell select
WCDMA系统的小区重选采用R准则,适用于同频.异频和异系统的小区重选.UE在空闲模式下,要随时监测当前小区和邻区的信号质量,以选择一个最好的小区提供服务,这就是小区重选过程(cell reselec ...
Excel导入异常Cannot get a text value from a numeric cell解决
POI操作Excel时偶尔会出现Cannot get a text value from a numeric cell的异常错误. 异常原因:Excel数据Cell有不同的类型,当我们试图从一个数字类 ...
懒加载字典转模型自定义cell
1 懒加载: 1> 什么是懒加载? 懒加载又称为延时加载,即在系统调用的时候加载,如果系统不调用则不会加载.所谓的懒加载其实就是重写其 get 方法. 2> 特点:在使用懒加载的时候要 ...
设Excle的cell中显示一个下拉列表选择框
描述:我想让excle的sheet页中的B列的每个cell输入内容的时候将A列所有行的内容作为下拉列表的选择内容效果如下: 实现的步骤如下: 1.点击B列的头,选中整列 2.点击菜单栏的" ...
在cell中取得UITableView所在的ViewController对象
原来碰到这个问题一般会将控制器传进cell中, 或者将cell要做的响应事件回调到控制器去处理, 前段时间找到一种方法觉得很不错 - (UIViewController *)getTableViewS ...
iOS 在每一个cell上添加一个定时器的方案
1 首先创建一个数组,用来创建所有的定时器的时间 - (NSMutableArray *)totalLastTime {if (!_totalLastTime) {_totalLastTime = [ ...

wxc-cell使用

wxc-cell使用相关推荐

最新文章

热门文章