taro demos & taro 組件庫

ui demo

https://github.com/qit-team/taro-yanxuan

https://github.com/fengchunsgit/taro-meituan

tarojs/components

Text, View, Image

https://www.npmjs.com/package/@tarojs/components

https://taro-docs.jd.com/taro/docs/components/viewContainer/view.html

import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'


export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Text>flex-direction: row 橫向布局</Text>
        <View className='flex-wrp' style='flex-direction:row;'>
          <View className='flex-item demo-text-1'/>
          <View className='flex-item demo-text-2'/>
          <View className='flex-item demo-text-3'/>
        </View>
        <Text>flex-direction: column 縱向布局</Text>
        <View className='flex-wrp' style='flex-direction:column;'>
          <View className='flex-item flex-item-V demo-text-1'/>
          <View className='flex-item flex-item-V demo-text-2'/>
          <View className='flex-item flex-item-V demo-text-3'/>
        </View>
      </View>
    )
  }
}

taro 組件庫說明

https://nervjs.github.io/taro/docs/components-desc.html

https://github.com/NervJS/taro/tree/2.x/packages/taro-components/src/components

https://github.com/NervJS/taro/blob/2.x/packages/taro-components/src/index.js

demo


import Taro, { Component, Config } from '@tarojs/taro'
import {
  View,
  Text,
  Image,
} from '@tarojs/components'
import './index.scss'

import {
  AtButton,
  AtFloatLayout,
} from 'taro-ui'

const log = console.log;

export default class TicketCard extends Component {
  config: Config = {
    navigationBarTitleText: '立即購票'
  }
  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
      isOpened: false,
    }
  }
  gotoIndex () {
    Taro.navigateTo({
      url: '/pages/index/index',
      // url: '/pages/index',
    })
  }

  handleClose () {
    this.setState({
      isOpened: false,
    })
  }

  handleOpen () {
    this.setState({
      isOpened: true,
    })
  }
  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='at-row'>
        <View className='at-col at-col-12'>
          <Text>TicketCard</Text>
          <Image className='img' src={require('../../assets/alipay.png')} />
        </View>
      </View>
    )
  }
}