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>
)
}
}

微信组件

https://developers.weixin.qq.com/miniprogram/dev/component/

Taro UI

https://github.com/NervJS/taro-ui

https://github.com/NervJS/taro-ui/blob/dev/src/index.ts

https://github.com/NervJS/taro-ui/tree/dev/src/components


Taro 框架

https://nervjs.github.io/taro/docs/tutorial.html#页面配置

Taro 规范

https://nervjs.github.io/taro/docs/spec-for-taro.html

Taro 生命周期

https://nervjs.github.io/taro/docs/state.html

Taro 函数式组件

https://nervjs.github.io/taro/docs/functional-component.html#类函数式组件

Taro 最佳实践

https://nervjs.github.io/taro/docs/best-practice.html

refs



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


taro demos & taro 组件库的更多相关文章

  1. Taro Next H5 跨框架组件库实践

    作者:凹凸曼 - JJ Taro 是一款多端开发框架.开发者只需编写一份代码,即可生成各小程序端.H5 以及 React Native 的应用. Taro Next 近期已发布 beta 版本,全面完 ...

  2. Taro -- 上传图片公用组件

    Taro上传图片公用组件 子组件chooseImage //component/chooseImage/index.js import Taro, { Component } from '@taroj ...

  3. 京东 Vue3 组件库支持小程序开发啦!

    源码抢先看: https://github.com/jdf2e/nutui NutUI 3.0 官网:https://nutui.jd.com/3x/#/ 小程序多端适配 设计初衷 在跨端小程序的开发 ...

  4. 提升组件库通用能力 - NutUI 在线主题定制功能探索

    开发背景 NutUI 作为京东风格的组件库,已具备 H5 和多端小程序开发能力.随着业务的不断发展,组件库的应用场景越来越广.在公司内外面临诸如科技.金融.物流等各多个大型团队使用时,单一的京东 AP ...

  5. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

  6. [转]VUE优秀UI组件库合集

    原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.v ...

  7. 【转】前端——实用UI组件库

    Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...

  8. 前端——实用UI组件库

    Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...

  9. Vitepress搭建组件库文档(下)—— 组件 Demo

    上文 <Vitepress搭建组件库文档(上)-- 基本配置>已经讨论了 vitepress 搭建组件库文档的基本配置,包括站点 Logo.名称.首页 home 布局.顶部导航.左侧导航等 ...

随机推荐

  1. Socket的用法——NIO包下SocketChannel的用法 ———————————————— 版权声明:本文为CSDN博主「茶_小哥」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/ycgslh/article/details/79604074

    服务端代码实现如下,其中包括一个静态内部类Handler来作为处理器,处理不同的操作.注意在遍历选择键集合时,没处理完一个操作,要将该请求在集合中移除./*模拟服务端-nio-Socket实现*/pu ...

  2. 向同一个模型的外键反向关联名称产生了冲突 Django迁移

    向同一个模型的外键反向关联名称产生了冲突 一个模型中有两个外键指向同一张表时,创建迁移模型时报错:" HINT: Add or change a related_name argument ...

  3. 序列化 serialize

    Serializable 序列化  The byte stream created is platform independent. So, the object serialized on one ...

  4. mysql8.0.19忘记密码

    1.管理员打开cmd窗口 2.输入net stop mysql,停止mysql服务 3.开启跳过验证密码的mysql服务 用记事本打开 输入skip-grant-tables ,保存 4.管理员打开新 ...

  5. poj2185Milking Grid

    Milking Grid Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 8325   Accepted: 3588 Desc ...

  6. MySQL的索引为什么用B+Tree?InnDB的数据存储文件和MyISAM的有何不同?

    前言 这篇文章的题目,是我真实在面试过程中遇到的问题,某互联网众筹公司在考察面试者MySQL相关知识的第一个问题,我当时还是比较懵的,没想到这年轻人不讲武德,不按套路出牌,一般的问MySQL的相关知识 ...

  7. 利用Javascript制作网页特效(时间特效)

    在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...

  8. 将插件绑定在某个phase执行,推送镜像

    文章目录 将插件绑定在某个phase执行 推送镜像 将插件绑定在某个phase执行 需求:在执行mvn clean package 时,插件自动为构建Docker镜像. 实现:将插件的的goal绑定在 ...

  9. go语言常见面试题

    前言 从网上找了一些面试题,觉得有意思的我都记录下来,自己学习和大家一起学习吧. 有些初级的题目只放答案,一些值得探讨的问题我会写上我自己的分析过程,希望大家多多交流. 原文链接 选择题 1.[初级] ...

  10. Java中的fail-fast和 fail-safe 的区别

    在我们详细讨论这两种机制的区别之前,首先得先了解并发修改. 1.什么是同步修改? 当一个或多个线程正在遍历一个集合Collection,此时另一个线程修改了这个集合的内容(添加,删除或者修改).这就是 ...