使用trao trao-ui 的历程

修改trao-ui组件中的默认样式

搜索组件中我不想要搜索按钮

<AtSearchBar value={this.state.value}
             onChange={this.handleChange}
             className="searchNoBtn"

然后再全局样式中添加：我的就在app.less文件

.searchNoBtn {
  .at-search-bar__action {
    display: none !important;
  }
}

不能用函数组件 会提示react undefined

 const renderLabel = (list) => {
   return list.map(v => {
     return (
       <AtTag>{v}</AtTag>
     )
   })
 };

这么写会报错。
可以直接在class 里面对数组进行map

<View className="panel-main">
{
 historyList.map((item, i) => {
    return AtTag>
  })
}
View>

使用图片

直接将相对路径放在src属性中，不起作用，
需要先import进来，最好把图片放到服务器上，然后直接写http路径

错误写法：

<Image src="./images/front.png" />

正确写法:

import namedPng from './images/front.png'
...

当进入页面就请求数据

componentDidShow 对应微信小程序的 onShow 方法。

taro里面没有this.props.history属性。

参考文章

部分页面加载动画

this.state.loading ?  : null

官网

切换tab

使用navigateTo和redirectTo会报错navigateTo:fail can not navigateTo a tabbar page

Taro.switchTab({
	url: '/pages/index/index',
})

ScrollView 微信小程序横向滚动

View不换行问题。横向滚动需要添加：

1. 属性scrollX
2. 父元素设置white-space: nowrap
3. 子元素设置display: inline-block

<ScrollView
	className='scrollview'
	scrollX
	>
		<View className="scroll-item item-a">AView>
		<View className="scroll-item item-b">BView>
ScrollView>

<style>
.scrollview {
    height: 200px;
    white-space: nowrap;
    .scroll-item {
      display: inline-block;
      width: 550px;
      height: 200px;
    }
    .item-a {
      background-color: red;
    }
    .item-b {
      background-color: black;
    }
  }
style>