uni-app详情页开发

uni-app详情页开发

1.跳转详情页

1.声明式导航

<view class="prolist">
	<navigator :url="'/pages/detail/detail?proid='+item.proid" class="proitem" v-for="(item,index) of prolist" :key="index">
		<view class="itemimg">
			<image :src="item.proimg" mode=""></image>
		</view>
		<view class="iteminfo">
			<view class="title">{{item.proname}}</view>
		</view>
	</navigator>
</view>

注意，url的值也属于变量因此也需要采用绑定属性的方法，并且url路径的值要为绝对路径。

detail.vue：

<template>
	<view>
		<view>
			<image :src="proimg" mode=""></image>
			<view>产品名称: {{proname}} </view>
			<view>价格: {{price}} RMB</view>
			<view>产品详情: {{desc}} </view>
		</view>
	</view>
</template>

<script>
	import {request} from '../../utils/index.js'
	export default {
		data() {
			return {
				proname: '',
				proid: '',
				proimg: '',
				desc: '',
				price: 0
			}
		},
		methods: {
			onLoad (options) {
				console.log(options)
				// 获取页面上传递过来的参数proid
				const { proid } = options
				// 请求特定的数据进行页面渲染
				request({
					url:'/pro/detail?proid=' + proid
				}).then(res => {
					console.log(res.data.data)
					const { proname, proimg, desc, price } = res.data.data
					this.proname = proname
					this.proimg = proimg
					this.desc = desc
					this.price = price
                    uni.setNavigationBarTitle({ //设置详情页的标题
						title:proname
					})
				})
			}
		}
	}
</script>

<style>

</style>

2.编程式导航

首先在组件上绑定自定义的方法，对于自定义的方法要写在methods字段中。

<view class="prolist">
    <view @click="toDetail(item.proid)" class="proitem" v-for="(item,index) of prolist" :key="index">
        <view class="itemimg">
            <image :src="item.proimg" mode=""></image>
        </view>
        <view class="iteminfo">
            <view class="title">{{item.proname}}</view>
        </view>
    </view>
</view>
...
<script>
	export default {
		props:['prolist'], 
		data() {
			return {
				
			};
		},
		methods: {
			toDetail(proid) {
				uni.navigateTo({
					url: '/pages/detail/detail?proid=' + proid,
				})
			}
		}
	}
</script>
...

2.

3.