智能小程序 Ray 开发——表单组件 Slider、Switch 和 Textarea 实操讲解

最新推荐文章于 2025-06-14 15:47:21 发布

原创最新推荐文章于 2025-06-14 15:47:21 发布 · 1.3k 阅读

22 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #前端 #开发语言 #小程序 #App

Slider

滑动选择器

导入

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

属性说明

属性名	类型	默认值	必填	说明	支持平台
min	number	0	否	最小值	涂鸦、微信
max	number	100	否	最大值	涂鸦、微信
step	number	1	否	步长，取值必须大于 0，并且可被(max - min)整除	涂鸦、微信
disabled	boolean	false	否	是否禁用	涂鸦、微信
value	number	0	否	当前取值	涂鸦、微信
activeColor	color	#007aff	否	已选择的颜色	涂鸦、微信
backgroundColor	color	rgba(0,0,0,.2)	否	背景条的颜色	涂鸦、微信
blockSize	number	28	否	滑块的大小，取值范围为 12 - 28	涂鸦、微信
blockColor	color	#ffffff	否	滑块的颜色	涂鸦、微信
showValue	boolean	false	否	是否显示当前 value	涂鸦、微信
onChange	eventhandle		否	完成一次拖动后触发的事件，event.value	涂鸦、微信
onChanging	eventhandle		否	拖动过程中触发的事件，event.value	涂鸦、微信

示例代码

基本使用

import React from 'react';
 
import { Slider } from '@ray-js/components';
 
export default function HorizontalScroll() {
  return (
    <Slider
      step={5}
      showValue
      activeColor="orange"
      blockColor="pink"
      min={50}
      max={200}
      onChange={(e) => {
        console.log('SliderChange', e);
      }}
    />
  );
}

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

Switch

开关选择器。

导入

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

属性说明

属性	类型	默认值	说明	支持平台
checked	boolean	false	当前是否选中	涂鸦、微信
disabled	boolean	false	是否禁用	涂鸦、微信
color	string	#007AFF	Switch 的颜色，同 css 的 color	涂鸦、微信
type	string	switch	可选值 `switch` `checkbox`	涂鸦、微信
onChange	func(event)	否	checked 改变时触发 change 事件，event.detail={ value}	涂鸦、微信

示例代码

基本使用

import React from 'react';
import { Switch } from '@ray-js/components';
 
export default function () {
  const handleSwitchChange = (e) => {
    console.log('switch changed', e);
  };
  return <Switch color="#ff0000" onChange={handleSwitchChange} />;
}

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

Textarea

文本域输入框

导入

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

属性说明

属性	类型	默认值	说明	支持平台
id	string		组件的 id	涂鸦、微信、RN
style	CSSProperties		标签栏样式	涂鸦、微信、RN
className	string		标签栏样式名	涂鸦、微信、RN
name	string		输入框的名字	涂鸦、微信、RN
value	string		输入框的内容	涂鸦、微信、RN
placeholder	string		输入框为空时占位符	涂鸦、微信、RN
placeholderStyle	string		指定 placeholder 的样式，目前仅支持 color,fontSize 和 fontWeight	涂鸦、微信、RN
disabled	boolean	false	是否禁用	涂鸦、微信、RN
maxlength	number	140	最大输入长度，设置为 -1 的时候不限制最大长度	涂鸦、微信、RN
autoHeight	boolean	false	是否自动增高，设置 autoHeight 时，style.height 不生效	涂鸦、微信、RN
onFocus	(event: any) => any;		输入框聚焦时触发	涂鸦、微信、RN
onBlur	(event: any) => any;		输入框失去焦点时触发	涂鸦、微信、RN
onInput	(event: TextareaEvent) => any;		当键盘输入时，触发 input 事件，event = {value: value}	涂鸦、微信、RN
onConfirm	(event: any) => any;		点击完成时，触发 confirm 事件，event = {value: value}	涂鸦、微信、RN

示例代码

基本使用

import React from 'react';
 
import { Textarea, Button } from '@ray-js/components';
 
export default function TextareaDemo() {
  const [focus, setFocus] = React.useState(false);
 
  return (
    <React.Fragment>
      <Textarea
        focus={focus}
        style={{ fontSize: 40, color: '#89aaff' }}
        value="默认文案"
        placeholder="请输入..."
        placeholderStyle={{
          color: '#999',
        }}
        onConfirm={(event) => {
          console.log('onConfirm', event);
        }}
        onBlur={(event) => {
          console.log('onBlur', event);
          setFocus(false);
        }}
        onFocus={(event) => {
          console.log('onFocus', event);
        }}
        onInput={(event) => {
          console.log('onInput', event);
        }}
      />
      <Button
        style={{ marginTop: 24 }}
        onClick={() => {
          setFocus((v) => !v);
        }}
      >
        {focus ? '丢焦' : '聚焦'}
      </Button>
    </React.Fragment>
  );
}

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