一、阿里矢量图标引
1、下载:
注:添加至项目进行下载。
2、引入:
1)把下载好的放入到src——> assets(静态资源)里,然后创建iconfont文件夹,把下载的图标放入文件夹中;
2)在app.js中引入:
/**
* 1、引入阿里矢量图标
* 在阿里矢量图标——>下载至项目——>下载至本地——>引入下载好的文件夹里的 iconfont.css
* 在pages——》index——》index.js里面进行了 使用案例
*/
import "./assets/iconfont/iconfont.css";
3)使用:
{/* 2、使用阿里矢量图标,这个在下载的 index.html里面查看 */}
<View className="iconfont icon-lingshouguanli"></View>
二,循环遍历
1、函数式页面里或组件里的使用
import Taro, { useState, useEffect } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
function Index() {
const arr = [
{ text: "wsaSasADa" },
{ text: "wsaSasADa" },
{ text: "wsaSasADa" },
{ text: "wsaSasADa" },
{ text: "wsaSasADa" },
{ text: "wsaSasADa" },
{ text: "wsaSasADa" }
];
//第一种遍历方式
let newdemo = arr.map((item, index) => {
return (
<View key={index}>
{item.text}
</View>
)
})
return (<View>
{newdemo}
{/* 第二种遍历方式 */}
{
arr.map((item, index) => {
return (
<View key={index}>
{item.text}
</View>
)
})
}
</View>
)
}
export default Index
2.类组件遍历
import Taro,{Component}from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
export default class Index extends Component {
state = {
arrList:[
{ text: "wsaSasADa" },
{ text: "wsaSasADa" },
{ text: "wsaSasADa" },
{ text: "wsaSasADa" },
{ text: "wsaSasADa" },
{ text: "wsaSasADa" },
{ text: "wsaSasADa" }
]
}
render() {
let newdemo=this.state.arrList.map((item,index)=>{
return (
<View>
{index + 1}、
{
item.text.toLowerCase()
}
</View>
)
})
return (
<View>
{
this.state.arrList.map((item,idex)=>{
return (
<View>
{item.text.toUpperCase()}
</View>
)
})
}
{
newdemo
}
</View>
)
}
}
三、传值
1、正向传值
1)在xx页面中传参
//下面是Hook 页面
import Taro, { useState, useEffect } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import List from "./components/Index"
function Index() {
const str = "wyyyyyy";
return (
<View>
{/*1.传值*/}
<List arrList={str}></List>
</View>
)
}
export default Index
2)在组件中接收
import Taro,{Component}from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
export default class Index extends Component {
//2.接收
static propTypes = {
arrList:""
}
render() {
return (
<View>
//3.使用
{this.props.arrList}
</View>
)、‘ ``
## 2.逆向传值
1)在组件中传值
```javascript
import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
export default class Index extends Component {
// 1.在子组件中创建数据
constructor(props) {
super(props);
this.state = {
text: "我是子组件的数据"
}
}
render() {
return (
<View>
<p>子组件</p>
{/* 2.给子son这个函数 绑定一个参数 ;this.state.text是实参*/}
{/* 接受父组件传递过来的props函数 并且给他绑定this与参数 */}
<Button onClick={this.props.son.bind(this,this.state.text)}>点我把数据传给父</Button>
</View>
)
}
}
2)在xx页面中接受
import Taro,{Component}from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import List from "./components/Index"
export default class Index extends Component {
state={
text:""
}
// 4.这就需要一个形参(创建函数接受子组件的逆向传值)
father=(texts)=>{
this.setState({
text:texts
})
console.log(texts);
}
render() {
return (
<View>
<List son={this.father}/>
{this.state.text}
</View>
)
}
}