examples/mini-program-example/src/pages/api/interface/menu/index.tsx - main - githubmirror/taro

examples/mini-program-example/src/pages/api/interface/menu/index.tsx

64 строки1 KB

刘阳

同步harmony最新开发分支的代码：例子程序

02 апр 2024, 09:33

02 апр 2024, 09:33d958330

import React from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { TestConsole } from '@/util/util'
import ButtonList from '@/components/buttonList'
import './index.scss'

/**
 * 界面-菜单
 * @returns
 */

export default class Index extends React.Component {
  state = {
    list: [
      {
        id: 'getMenuButtonBoundingClientRect',
        func: (apiIndex) => {
          TestConsole.consoleTest('Taro.getMenuButtonBoundingClientRect')
          const rect = Taro.getMenuButtonBoundingClientRect()
          TestConsole.consoleResult.call(this, rect, apiIndex)
        },
      },
    ],
    style: {
      top: 0,
      left: 0,
    },
  }

  onLoad() {
    try {
      const rect = Taro.getMenuButtonBoundingClientRect()
      this.setState({
        style: {
          top: `${rect.top}px`,
          left: `${rect.right - 87}px`,
          position: 'relative',
          marginBottom: '50px',
          width: '87px',
          borderRadius: `${rect.height}px`,
          height: `${rect.height}px`,
          fontSize: '16fp',
        },
      })
    } catch (err) {
      console.log('getMenuButtonBoundingClientRect failed')
    }
  }

  render() {
    const { list, style } = this.state
    return (
      <>
        <View className='capsule-btn' style={style}>
          胶囊
        </View>
        <View className='api-page'>
          <ButtonList buttonList={list} />
        </View>
      </>
    )
  }
}