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>

 這樣點擊之后就會觸發組件里面的跳轉方法了