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>

    )

  }

}