智能小程序 Ray 开发实践——视图容器组件 View 介绍

View

用于页面布局的元素

导入

import { View } from '@ray-js/ray';

属性说明

属性	类型	默认值	说明	支持平台
style	CSSProperties		样式	涂鸦、微信
className	string		样式名	涂鸦、微信
hoverClassName	string	none	hover 样式	涂鸦、微信
hoverStyle	string	none	hover 样式名	涂鸦、微信
hoverStartTime	number	20	按住后多久出现点击态 单位 ms	涂鸦、微信
hoverStayTime	number	70	手指松开后点击态保留时间 ms	涂鸦、微信

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。 

 

示例代码

• index.module.less

.view {
  background-color: #e67d1b;
  height: 120rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.innerView {
  background-color: #e67d1b;
  height: 120rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10rpx;
}
 
.hoverView {
  background-color: #1f6de2;
}
 
.hoverTransition {
  background-color: #1f6de2;
  transition: background-color linear 0.3s;
}

flex 布局

import React from 'react';
 
import { View } from '@ray-js/components';
 
import styles from './index.module.less';
 
export default function flex() {
  const click = (e) => {
    console.log('click');
  };
  return (
    <View style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
      <View
        onTouchEnd={click}
        style={{ flex: 1 }}
        hoverClassName={styles.hoverView}
        className={styles.innerView}
      >
        A
      </View>
      <View
        style={{ flex: 1 }}
        hoverClassName={styles.hoverView}
        className={styles.innerView}
      >
        B
      </View>
      <View
        style={{ flex: 1 }}
        hoverClassName={styles.hoverView}
        className={styles.innerView}
      >
        C
      </View>
    </View>
  );
}

基本使用

import React from 'react';
 
import { View } from '@ray-js/components';
 
import styles from './index.module.less';
 
export default function () {
  let t = 0;
  return (
    <View
      hoverClassName={styles.hoverView}
      hoverStyle={{ backgroundColor: '#f00' }}
      className={styles.view}
      onTouchStart={() => {
        t = Date.now();
        console.log('touch start');
      }}
      onTouchEnd={() => {
        console.log('touch end');
      }}
      onClick={() => {
        console.log(`${Date.now() - t}ms`);
      }}
    >
      按住变色
    </View>
  );
}

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。