uniapp之 点击图片跳转详情 组件

1.在项目根目录下创建  component文件夹 新建vue文件  goDetail.vue  如下    接收一个 list 和一个 index

<template name="godetail">
	<view @click="handleClick">
		<slot>

		</slot>
	</view>
</template>
<script>
	export default {
		name: "godetail",
		//属性
		props: {
			list: Array,
			index: Number,
		},
		//组件生命周期
		created: function(e) {
			console.log("创建了组件");
		},
		mounted() {
			// console.log("组件加载完成");
			// console.log(this.list);
			// console.log(this.index);
		},
		methods: {
			tonext: function(obj) {

			},
			handleClick: function(obj) {
				console.log("点击了");
				// 1.数据缓存
				getApp().globalData.imglist = this.list;
				getApp().globalData.index = this.index;

				//2.跳转页面
				console.log(this.item);
				uni.navigateTo({
				　　url: "/pages/product/product_detail",
				})
			},
		}
	}
</script>
<style>

</style>

2.在页面用使用 

先引入组件

<script>
    // 1、引用组件
    import godetail from "../../component/goDetail.vue";
    // import godetail from '@/component/goDetail';
    // 2、注册组件
    export default {
        components: {
            godetail
        },

然后插入到 view中,包在需要点击的view外层  这里包在image外面

    <scroll-view class="scroll-view" scroll-y="true" @scroll="scroll">
                    <view class=" scroll-view-item" v-for="(item,index) in product_list" :key="index">
                        <godetail :list="product_list" :index="index">
                            <image :src="item.product_image" mode="aspectFill" @error="imageError"></image>
                            <view> <text>{{item.product_name}}</text></view>
                            <view> <text>￥{{item.display_price}}</text></view>
                        </godetail>
                    </view>
                </scroll-view>

 这样点击之后就会触发组件里面的跳转方法了