Kingkong 金刚位

金刚位组件

使用指南

在 Taro 文件中引入组件

import { Zokingkong } from '@lylb/tzo-ui';

组件依赖的样式文件（仅按需引用时需要）

@import '~@lylb/tzo-ui/dist/style/components/king-kong.scss';

一般用法

import Taro from '@tarojs/taro';
import { ZoKingkong } from '@lylb/tzo-ui';
export default class Index extends Taro.Component {
  constructor() {
    super(...arguments);
    this.state = {
      list: [
        {
          title: '标题1',
          icon: 'https://mystore-h5.watsonsvip.com.cn/01hdzx/0427/redEnvelopes_icon.png',
          clickEventInfo: {
            type: 1,
            jumpUrl: '/pages/index/index',
          },
        },
        {
          title: '标题2',
          icon: 'https://mystore-h5.watsonsvip.com.cn/01hdzx/0427/redEnvelopes_icon.png',
        },
      ],
      maxRows: 2,
      columnNum: 4,
    };
  }
  onClick = (event) => {
    console.log(event);
  };
  onScroll = (event) => {
    console.log(event);
  };
  render() {
    const { list, columnNum, maxRows } = this.state;
    return (
      <ZoKingkong
        kingkongList={list}
        columnNum={columnNum}
        maxRows={maxRows}
        onClick={this.onClick}
        onScroll={this.onScroll}
      />
    );
  }
}

参数

组件参数

参数	说明	类型	可选值	默认值
kingkongList	数据列表	Array	必填	-
columnNum	每行有几列	Number	-	3
maxRows	最大限制行数	Number	-	0
iconMode	图标的图片显示模式（小程序）优先级低于列表字段	String	iconMode	scaleToFill

列表数据

参数	说明	类型	可选值	默认值
title	金刚位标题	String	-	-
titleStyle	标题自定义样式	Object	-	-
itemClass	自定义 classname	String	-	-
icon	图标地址	String	-	-
iconStyle	图标自定义样式	String	-	-
extraRender	自定义 dom 节点	Function	()=> (JSX.Element)	-
extraStyle	自定义 dom 的自定义样式	Object	-	-
clickEventInfo	点击事件相关数据	Object	{type:1,jumpUrl:'',appId:''}	-
iconMode	图标的图片显示模式（小程序）	String	iconMode	scaleToFill

iconMode

// iconMode类型
    /** 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 */
    scaleToFill
    /** 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 */
    aspectFit
    /** 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 */
    aspectFill
    /** 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 */
    widthFix
    /** 裁剪模式，不缩放图片，只显示图片的顶部区域 */
    top
    /** 裁剪模式，不缩放图片，只显示图片的底部区域 */
    bottom
    /** 裁剪模式，不缩放图片，只显示图片的中间区域 */
    center
    /** 裁剪模式，不缩放图片，只显示图片的左边区域 */
    left
    /** 裁剪模式，不缩放图片，只显示图片的右边区域 */
    right
    /** 裁剪模式，不缩放图片，只显示图片的左上边区域 */
    'top left'
    /** 裁剪模式，不缩放图片，只显示图片的右上边区域 */
    'top right'
    /** 裁剪模式，不缩放图片，只显示图片的左下边区域 */
    'bottom left'
    /** 裁剪模式，不缩放图片，只显示图片的右下边区域 */
    'bottom right'

事件

事件名称	说明	返回参数
onClick	金刚位点击的回调函数	event
onScroll	当受限行数限制，出现滚动区域时，滚动时触发的回调函数	event

TZo UI

Kingkong 金刚位

使用指南

一般用法

参数

组件参数

列表数据

iconMode

事件