taro demos & taro 组件库
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 组件库的更多相关文章
- Taro Next H5 跨框架组件库实践
作者:凹凸曼 - JJ Taro 是一款多端开发框架.开发者只需编写一份代码,即可生成各小程序端.H5 以及 React Native 的应用. Taro Next 近期已发布 beta 版本,全面完 ...
- Taro -- 上传图片公用组件
Taro上传图片公用组件 子组件chooseImage //component/chooseImage/index.js import Taro, { Component } from '@taroj ...
- 京东 Vue3 组件库支持小程序开发啦!
源码抢先看: https://github.com/jdf2e/nutui NutUI 3.0 官网:https://nutui.jd.com/3x/#/ 小程序多端适配 设计初衷 在跨端小程序的开发 ...
- 提升组件库通用能力 - NutUI 在线主题定制功能探索
开发背景 NutUI 作为京东风格的组件库,已具备 H5 和多端小程序开发能力.随着业务的不断发展,组件库的应用场景越来越广.在公司内外面临诸如科技.金融.物流等各多个大型团队使用时,单一的京东 AP ...
- [转载]前端——实用UI组件库
https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...
- [转]VUE优秀UI组件库合集
原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.v ...
- 【转】前端——实用UI组件库
Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...
- 前端——实用UI组件库
Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...
- Vitepress搭建组件库文档(下)—— 组件 Demo
上文 <Vitepress搭建组件库文档(上)-- 基本配置>已经讨论了 vitepress 搭建组件库文档的基本配置,包括站点 Logo.名称.首页 home 布局.顶部导航.左侧导航等 ...
随机推荐
- Socket的用法——NIO包下SocketChannel的用法 ———————————————— 版权声明:本文为CSDN博主「茶_小哥」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/ycgslh/article/details/79604074
服务端代码实现如下,其中包括一个静态内部类Handler来作为处理器,处理不同的操作.注意在遍历选择键集合时,没处理完一个操作,要将该请求在集合中移除./*模拟服务端-nio-Socket实现*/pu ...
- 向同一个模型的外键反向关联名称产生了冲突 Django迁移
向同一个模型的外键反向关联名称产生了冲突 一个模型中有两个外键指向同一张表时,创建迁移模型时报错:" HINT: Add or change a related_name argument ...
- 序列化 serialize
Serializable 序列化 The byte stream created is platform independent. So, the object serialized on one ...
- mysql8.0.19忘记密码
1.管理员打开cmd窗口 2.输入net stop mysql,停止mysql服务 3.开启跳过验证密码的mysql服务 用记事本打开 输入skip-grant-tables ,保存 4.管理员打开新 ...
- poj2185Milking Grid
Milking Grid Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 8325 Accepted: 3588 Desc ...
- MySQL的索引为什么用B+Tree?InnDB的数据存储文件和MyISAM的有何不同?
前言 这篇文章的题目,是我真实在面试过程中遇到的问题,某互联网众筹公司在考察面试者MySQL相关知识的第一个问题,我当时还是比较懵的,没想到这年轻人不讲武德,不按套路出牌,一般的问MySQL的相关知识 ...
- 利用Javascript制作网页特效(时间特效)
在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...
- 将插件绑定在某个phase执行,推送镜像
文章目录 将插件绑定在某个phase执行 推送镜像 将插件绑定在某个phase执行 需求:在执行mvn clean package 时,插件自动为构建Docker镜像. 实现:将插件的的goal绑定在 ...
- go语言常见面试题
前言 从网上找了一些面试题,觉得有意思的我都记录下来,自己学习和大家一起学习吧. 有些初级的题目只放答案,一些值得探讨的问题我会写上我自己的分析过程,希望大家多多交流. 原文链接 选择题 1.[初级] ...
- Java中的fail-fast和 fail-safe 的区别
在我们详细讨论这两种机制的区别之前,首先得先了解并发修改. 1.什么是同步修改? 当一个或多个线程正在遍历一个集合Collection,此时另一个线程修改了这个集合的内容(添加,删除或者修改).这就是 ...