2.3.0 • Published 4 years ago

rax-view v2.3.0

Weekly downloads
2,024
License
BSD-3-Clause
Repository
github
Last release
4 years ago

rax-view

npm

支持

Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序

描述

View 是最基础的组件,它支持 Flexbox、touch handling 等功能,并且可以任意嵌套。 不论在什么容器中,View 都直接对应一个容器的原生视图,就像 web 中的 div 一样。 支持任意自定义属性的透传。

安装

$ npm install rax-view --save

属性

属性类型默认值必填描述支持
classNamestring-false自定义样式名
styleCSSProperties-false自定义样式
onClickfunction-false点击
onLongpressfunction-false长按
onAppearfunction-false当前元素可见时触发
onDisappearfunction-false当前元素从可见变为不可见时触发
onFirstAppearfunction-false当前元素首次可见时触发
onTouchStartfunction-false触摸动作开始
onTouchMovefunction-false触摸后移动
onTouchEndfunction-false触摸动作结束
onTouchCancelfunction-false触摸动作被打断,如来电提醒,弹窗

注意

  • appear 相关事件在 Web 中需要引入并使用 appear-polyfill
  • onAppear/onDisappear/onFirstAppear 在微信小程序端仅支持运行时方案

示例

import { createElement, useRef, useEffect, render } from "rax";
import DU from "driver-universal";
import View from "rax-view";

const App = () => {
  const viewRef = useRef(null);
  useEffect(() => {});
  return (
    <View
      ref={viewRef}
      style={{
        padding: '30rpx'
      }}
      onClick={() => {
        alert("container was clicked!");
      }}
    >
      <View
        style={{
          width: '300rpx',
          height: '300rpx',
          backgroundColor: "red"
        }}
        onClick={e => {
          e.stopPropagation();
          alert("red was clicked");
        }}
      />
      <View
        style={{
          width: '300rpx',
          height: '300rpx',
          backgroundColor: "green",
          position: "absolute",
          top: '20rpx',
          left: '20rpx'
        }}
        onClick={() => {
          alert("green was clicked");
        }}
      />
      <View
        style={{
          width: '300rpx',
          height: '300rpx',
          backgroundColor: "yellow",
          position: "absolute",
          top: '80rpx',
          left: '210rpx'
        }}
        onClick={e => {}}
      />
    </View>
  );
};

render(<App />, document.body, { driver: DU });

默认样式

rax-view 默认样式如下:

.rax-view-v2 {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   align-content: flex-start;
   border: 0 solid black;
   margin: 0;
   padding: 0;
   min-width: 0;
}
felix-rax-inputtitle-component@vfa25/h5-watermarkdesign-test-a@everything-registry/sub-chunk-2533tboc-viewtab-header-containerxl-rax-modaltemplate-buytemplate-chattemplate-taobaotemplate-zhihu@bondli/mini-biz-ui@bondli/mini-pos-sdk@bondli/mini-uijinboker-task-sdkhzw-componentsh5-demo-tpllego-image-text-testae-task-panelakwebace-test-local@halofe/rax-trade-refund@halofe/rax-detail@halofe/rax-item-evaluation@halofe/rax-materials@halofe/rax-materials-test@halofe/rax-member-address@halofe/rax-miniapp-lib@halofe/rax-trade-cart@halofe/rax-trade-cart-test@halofe/rax-trade-order@halofe/astore-mods-miniapp-rax-trade-refund@halofe/astore-mods-miniapp-member-address@halofe/astore-mods-miniapp-rax-carts@halofe/astore-mods-miniapp-rax-detail@halofe/astore-mods-miniapp-rax-item-evaluation@halofe/astore-mods-miniapp-rax-trade-order@aliretail/point-member-sdk@aliretail/point-member-sdk-dev@aliretail/rax-material-demo@aliretail/rax-materials-components@aliretail/rax-miniapp-devtools@aliretail/rax-miniapp-lib@aliretail/rax-test-materials@aliretail/deploy@aliretail/officialmod-miniapp-rax-mall_add_on_sku_list@aliretail/officialmod-miniapp-rax-mall_bargain_activity_detail@aliretail/officialmod-miniapp-rax-mall_bargain_activity_entry@aliretail/officialmod-miniapp-rax-mall_category_list@aliretail/officialmod-miniapp-rax-mall_coupon@aliretail/officialmod-miniapp-rax-mall_coupon_bar@aliretail/officialmod-miniapp-rax-mall_cycle_buy@aliretail/officialmod-miniapp-rax-mall_group@aliretail/officialmod-miniapp-rax-mall_group_head@aliretail/officialmod-miniapp-rax-mall_group_old@aliretail/officialmod-miniapp-rax-mall_order_bar@aliretail/officialmod-miniapp-rax-mall_period_shopbag@aliretail/officialmod-miniapp-rax-mall_purchase@aliretail/officialmod-miniapp-rax-mall_recharge@aliretail/officialmod-miniapp-rax-mall_reward_activity_entry@aliretail/officialmod-miniapp-rax-mall_search@aliretail/officialmod-miniapp-rax-mall_search_address@aliretail/officialmod-miniapp-rax-mall_search_result@aliretail/officialmod-miniapp-rax-mall_sku_list@aliretail/officialmod-miniapp-rax-mall_sku_tabs@aliretail/officialmod-miniapp-rax-member-base-bar@aliretail/officialmod-miniapp-rax-member-base_bar@aliretail/officialmod-miniapp-rax-member-ugc@aliretail/officialmod-miniapp-rax-member_base_bar@aliretail/officialmod-miniapp-rax-member_base_info@aliretail/officialmod-miniapp-rax-member_blind_box@aliretail/officialmod-miniapp-rax-member_grow_up@aliretail/officialmod-miniapp-rax-member_rain@aliretail/officialmod-miniapp-rax-member_search@aliretail/officialmod-miniapp-rax-member_share@aliretail/officialmod-miniapp-rax-member_sign@aliretail/officialmod-miniapp-rax-member_text@aliretail/ha-mallmod-miniapp-rax-activity_image@aliretail/ha-mallmod-miniapp-rax-category_list_page@aliretail/ha-mallmod-miniapp-rax-group_buy_entry@aliretail/ha-mallmod-miniapp-rax-ha_navigation_bar@aliretail/ha-mallmod-miniapp-rax-ha_search_bar@aliretail/ha-mallmod-miniapp-rax-ha_swiper@aliretail/ha-mallmod-miniapp-rax-page_settings@aliretail/ha-mallmod-miniapp-rax-search_address@aliretail/mall-member-sdk@aliretail/mall-refund-sdk@aliretail/mall-trade-sdk@aliretail/mallmod-miniapp-rax-activity_detail_bargain@aliretail/mallmod-miniapp-rax-bargain_activity_entry@aliretail/mallmod-miniapp-rax-coupons@aliretail/mallmod-miniapp-rax-group@aliretail/mallmod-miniapp-rax-popup@aliretail/mallmod-miniapp-rax-reward_activity_entry@aliretail/mallmod-miniapp-rax-video@aliretail/official-wl-dubu-test@aliretail/officialmod-miniapp-rax-add_on_sku_list@aliretail/officialmod-miniapp-rax-common_cube@aliretail/officialmod-miniapp-rax-common_dialog
2.3.0

4 years ago

2.1.0-beta.1

4 years ago

2.2.1

4 years ago

2.2.1-beta.1

4 years ago

2.2.0

4 years ago

2.2.0-0

4 years ago

2.1.1-0

4 years ago

2.1.1

4 years ago

2.1.0

4 years ago

2.0.6-4

4 years ago

2.0.6-3

5 years ago

2.0.6-2

5 years ago

2.0.6-1

5 years ago

2.0.6-0

5 years ago

2.0.5

5 years ago

2.0.5-0

5 years ago

2.0.4

5 years ago

2.0.3

5 years ago

2.0.1

5 years ago

2.0.0-0

5 years ago

2.0.0

5 years ago

1.2.0

5 years ago

1.2.0-1

5 years ago

1.2.0-0

5 years ago

1.1.2

5 years ago

1.1.2-beta.1

6 years ago

1.1.1-1

6 years ago

1.1.1-0

6 years ago

1.1.0

6 years ago

1.1.0-0

6 years ago

1.0.3-beta.3

6 years ago

1.0.4-beta.1

6 years ago

1.0.3-beta.2

6 years ago

1.0.3-beta.1

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.1-beta.11

6 years ago

1.0.1-beta.10

6 years ago

1.0.1-beta.9

6 years ago

1.0.1-beta.8

6 years ago

1.0.1-beta.7

6 years ago

1.0.1-beta.6

6 years ago

1.0.1-beta.5

6 years ago

1.0.1-beta.4

6 years ago

1.0.1-beta.3

6 years ago

1.0.1-beta.2

6 years ago

1.0.1-beta.1

6 years ago

1.0.1-beta.0

6 years ago

1.0.0-beta.2

6 years ago

1.0.0-beta.1

6 years ago

1.0.0

7 years ago

1.0.0-beta.0

7 years ago

0.6.5

7 years ago

0.6.4

7 years ago

0.6.3

7 years ago

0.6.2

7 years ago

0.6.1

7 years ago

0.6.0

8 years ago

0.5.4

8 years ago

0.5.2

8 years ago

0.5.1

8 years ago

0.5.0

8 years ago

0.4.20

8 years ago

0.4.19

8 years ago

0.4.18

8 years ago

0.4.17

8 years ago

0.4.16

8 years ago

0.4.15

8 years ago

0.5.0-beta

8 years ago

0.4.14

8 years ago

0.4.13

8 years ago

0.4.12

8 years ago

0.4.11

8 years ago

0.4.10

8 years ago

0.4.9

8 years ago

0.4.8

8 years ago

0.4.7

8 years ago

0.4.6

8 years ago

0.4.5

8 years ago

0.4.4

8 years ago

0.4.3

8 years ago

0.4.2

8 years ago

0.4.1

8 years ago

0.4.0

8 years ago

0.3.8

8 years ago

0.3.7

8 years ago

0.3.6

8 years ago

0.3.5

8 years ago

0.3.4

8 years ago

0.3.3

8 years ago

0.3.2

8 years ago

0.3.1

8 years ago

0.3.0

8 years ago

0.2.11

9 years ago

0.2.10

9 years ago

0.2.9

9 years ago

0.2.8

9 years ago

0.2.7

9 years ago

0.2.6

9 years ago

0.2.5

9 years ago

0.2.4

9 years ago

0.2.3

9 years ago

0.2.2

9 years ago

0.2.1

9 years ago

0.2.0

9 years ago