mpvue 小程序获取参数

最新推荐文章于 2022-09-17 20:15:34 发布

rich@cai

最新推荐文章于 2022-09-17 20:15:34 发布

阅读量553

点赞数

分类专栏： mpvue 文章标签：小程序

本文链接：https://blog.youkuaiyun.com/caihuawei123/article/details/106039127

版权

mpvue 专栏收录该内容

4 篇文章

订阅专栏

首页index.vue
<template>
  <div >

      Hello mpvue
      <ul>
        <li v-for="film in films" :key="film.filmId" @click="handleClickToDetail(film.filmId)">
          <image  mode="widthFix" :src="film.poster"></image>
          {{ film.name }}
        </li>
      </ul>
  </div>
</template>

<script>
// import card from '@/components/card'

export default {
  data () {
    return {
     films:[],
     current:1
    }
  },


  methods:{
    handleClickToDetail(id){
      console.log(id);
      mpvue.navigateTo({
        url:'/pages/detail/main?id='+id
      })
    }
  },

 

}
</script>

<style scoped>
  ul li image {
    width: 100px;
    float: left;
  }
  ul li {
    overflow: hidden;
  }
</style>>


详情页：detail.vue


<template>
    <div>
        详情页面
    </div>
</template>

<script>
export default {
    //获取参数方式1
    onLoad(options){
        console.log(options)
    },
    mounted(){
        console.log(this)
        //获取参数方式2
        console.log(this.$root.$mp.query)
    }
}
</script>

<style scoped>

</style>