Tuya Developer Forum

Code: Select all

Render({
  // 其他xxx
  renderChannel() {
    const eventChannelName = 'lampCirclePickerColorEventChannel';
    this.instance.eventChannel.on(eventChannelName, e => {
      // 此处可以接收到当颜色变化时传递的颜色数据
      const {
        rgba, // [r, g , b, a]
        touchType, // : 'start' | 'move' | 'end'
        pos,
      } = e;
      console.log('eventChannel get', e);
    });
  },
});

Code: Select all

/* eslint-disable prettier/prettier */
import { location, usePageInstance , usePageEvent } from 'ray'

import React from 'react'
import { Button, View, Text } from '@ray-js/components'
import { LampHuePicker, LampCirclePickerColor } from '@ray-js/components-ty-lamp'

import Render from './index.rjs';
import { IProps, TProps, HS } from './props'
import styles from './index.module.less'

export default function Home() {
  const fooRef = React.createRef()

  const [hs, setHS] = React.useState({ h: 266, s: 1000 })

  React.useEffect(() => {
    console.info('home did mount', location)
    console.log(fooRef.current)
    


  }, [])
  


  const handleTouchStart = (hsRes: HS) => {
    setHS(hsRes)
  }
  const handleTouchMove = (hsRes: HS) => {
    console.log(hsRes, 'handleTouchMove')
    console.log(hs, 'hs')
    // setHS(hsRes);
  }
  const handleTouchEnd = (hsRes: HS) => {
    setHS(hsRes)

  }
  const ctx = usePageInstance();
  usePageEvent('onShow', () => {
    const compInst = ctx.selectComponent('#PickerColors'); 
    const render = new Render(compInst);
    

console.info('home onShow')
  })

  usePageEvent('onHide', () => {
    console.info('home onHide')
  })

  usePageEvent('onPageScroll', (event: any) => {
    console.info('onPageScroll', event)
  })

  usePageEvent('onReachBottom', () => {
    console.info('onReachBottom')
  })

  usePageEvent('onResize', (event: any) => {
    console.info('onResize', event)
  })

  return (
        

<View className={styles.view} >
  <View className={styles.PickerColor} >
    <View className={styles.InnerCircle}><Text className={styles.TextM}>M</Text></View>
    <LampCirclePickerColor
    id='PickerColors[attachment=1]Snipaste_2024-07-25_11-13-56.png[/attachment][attachment=2]Snipaste_2024-07-25_10-02-59.png[/attachment]'
      hs={hs}
      thumbRadius={5}
      radius={120}
      whiteRange={0.1}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      onTouchMove={handleTouchMove}
      useEventChannel
    />
  </View>
</View>
  )
}

Code: Select all

export default Render({
  renderChannel() {
    const eventChannelName = 'lampCirclePickerColorEventChannel';
    this.instance.eventChannel.on(eventChannelName, e => {
      const {
        rgba, 
        touchType, 
        pos,
      } = e;
      console.log('eventChannel get', e);
    });
  },
});