使用taro写小程序进行页面间传参与接收

使用taro传参示例如下,触发点击事件时,在调用的函数后面加上bind(this,要传的参数)。

{
  list.map((item,index)=>(
    <View className="articleItem" onClick={this.jumpToDetail.bind(this,item.id)}>
      <View className="title">{item.title}</View>
      <View className="statement">
        <Text className="author">作者:{item.author}</Text>
        <Text>发布时间:{processTime(item.updateTime)}</Text>
      </View>
      <View className="content">
        {item.description}
      </View>
    </View>
  ))
}

然后进行页面的跳转。

jumpToDetail(id) {
  console.log(id)
  Taro.navigateTo({
    url: `/pages/articleDetail/articleDetail?id=${id}`
  })
}

在跳转后的页面进行参数的接收。

使用getCurrentInstance获取当前实例,然后获得参数id的值。

import Taro, { getCurrentInstance } from '@tarojs/taro'

export default class ArticleDetail extends Component {
  $instance = getCurrentInstance()

  state = {
    id:this.$instance.router.params.id,
    data:{}
  }
}

即可。

posted @ 2021-01-05 15:45  罗毅豪  阅读(2620)  评论(0编辑  收藏  举报