`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)// 获取页面上传递过来的参数proidconst { proid } = options// 请求特定的数据进行页面渲染request({url:'/pro/detail?proid=' + proid}).then(res => {console.log(res.data.data)const { proname, proimg, desc, price } = res.data.datathis.proname = pronamethis.proimg = proimgthis.desc = descthis.price = priceuni.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. uni-app详情页开发相关推荐

uni-app实战之社区交友APP（8）搜索列表页和文章详情页开发
文章目录前言一.搜索列表页开发 1.搜索类型传递和占位符设置 2.搜索功能实现二.帖子详情页开发 1.pages.json配置和页面通信 2.公共列表组件功能优化 3.详情页关注和顶踩功能完善 ...
Android 11.0 系统Settings app详情页增加统计使用时长功能
1.概述在系统产品开发中,在app详情页展示着权限,使用缓存数据等数据,由于产品需求需要在app 详情页增加app使用时长功能的需求来查看app使用情况的功能,所以就需要统计app使用的时间了来实 ...
微信小程序电商项目商品详情页开发实战之数据绑定与事件应用
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
跳转到应用商城App详情页
跳转到应用商城App详情页应用升级好多都会跳转到应用商城进行升级,写个博客巩固一下,也方便大家.这个demo的布局就一个Button. MainActivity public class MainA ...
Android滑动展示图片（一页多图，带小圆点，类似小米市场APP详情页图片展示）
最近公司需求上有个功能,类似小米市场上APP详情页里的图片展示效果,有点像广告位的展示,只是广告位一般都是展示一张,这个要求一个屏幕展示多张,想了一下用ViewPager的话一方面需要控制最后一张图防 ...
第6章歌手详情页开发
包括子路由的配置及转场动画实现.Vuex 的介绍.Vuex 初始化歌手数据的配置.歌手详情页数据抓取和处理.Song 类的封装.music-list 组件开发. 6-1 歌手详情页布局和设计详解 6- ...
电商小程序实战教程-商品详情页开发
我们上一篇开发了电商小程序的首页,本篇我们介绍一下详情页的开发.如果想开发详情页,首先要搞明白一个概念,在详情页展示数据的时候需要如何进行页面传参. 参数变量在微搭中变量一共是分三种,普通变量.模型 ...
用Weex实现新闻类app详情页是怎样一种体验？
本文同步发表在:http://www.jianshu.com/p/f6bf7636f81b 先上效果图: 详情页: 写在前面的话(weex在实际项目中给我的感受): 公司项目中我已尝试部分页面使用We ...
Android开发——跳转到应用商店以及app详情页、获取手机硬件信息、验证app是否存在
普通跳转 Tip:该跳转可适配普通的跳转,比如跳转豌豆荚 //appPkg是你要跳转的包名//marketPkg是你使用的应用商店,如果传空,则会把你手机上的应用商店全部列出来try {if (Tex ...
微信小程序开发--首页及详情页开发
一.常用组件在之前的封装请求数据的模块中请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.轮播图数据的请求pages/index/index.js data: {bannerlist:[] / ...

uni-app详情页开发

`uni-app`详情页开发

1.跳转详情页

1.声明式导航

2.编程式导航

2.

3.

uni-app详情页开发相关推荐

最新文章

热门文章