使用trao trao-ui 的历程

最新推荐文章于 2024-06-02 18:00:09 发布

Cribug8080

最新推荐文章于 2024-06-02 18:00:09 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： taro-ui js 文章标签：微信小程序 trao-ui

本文链接：https://blog.youkuaiyun.com/Cribug8080/article/details/99453024

js 同时被 2 个专栏收录

43 篇文章

订阅专栏

taro-ui

1 篇文章

订阅专栏

本文介绍如何在Taro框架中修改组件样式，包括去除默认搜索按钮、使用图片资源、页面加载动画及响应式布局技巧。同时，提供解决ScrollView横向滚动与View不换行问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改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 key={i}
      {item}
    </AtTag>
  })
}
</View>

使用图片

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

错误写法：

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

正确写法:

import namedPng from './images/front.png'
...
<Image src={namedPng} />

当进入页面就请求数据

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

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

参考文章

部分页面加载动画

this.state.loading ? <AtActivityIndicator mode='center' content='加载中...'/> : null

官网

切换tab

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

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

ScrollView 微信小程序横向滚动

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

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

<ScrollView
	className='scrollview'
	scrollX
	>
		<View className="scroll-item item-a">A</View>
		<View className="scroll-item item-b">B</View>
</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>