import React, { Component } from 'react'
import { View, Canvas } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'

export default class Index extends Component {
  current = Taro.getCurrentInstance()
  onReady () {
    console.log('didMount', this.current);
    // @ts-ignore
    const io = Taro.createIntersectionObserver(this.current.page);
    console.log('io 实例:', io);
    io.relativeToViewport().observe('.circle-container', res => {
      console.log('res:', res);
    });
  }

  render() {
    return (
      <View className='index'>
        <View>👇👇👇 向下滚动 👇👇👇👇</View>
        <View>👇👇👇 向下滚动 👇👇👇👇</View>
        <View>👇👇👇 向下滚动 👇👇👇👇</View>
        <View
          onClick={() => {
            // @ts-ignore
            Taro.showToast({
              title: 'aaaa'
            });
          }}
          className='circle-container'
          style={{
            height: '100rpx',
            backgroundColor: 'green',
            marginTop: '2000rpx',
            marginBottom: '100rpx',
            color: '#fff'
          }}
        >
          我的出现有触发 callback 吗?
        </View>
      </View>
    )
  }
}