点击列表，根据不同Id （参数）进入详情页

太过爱你忘了你带给我的痛 2021-09-07 06:22 388阅读 0赞

第一步：请求你要的参数
    第二步：跳转时把这个参数绑定在循环上
    第三步：实现功能，点击跳转对应页面
    第四步：接受参数使用

第一步：请求

this.$http.get('', { 
    					station_id: 2745,
    				}).then(res => { 
    					if (res.data.result === 1) { 
    						let server = res.data.data;
    						server.list.forEach(item => { 
    							this.baconlist.push({ 
    								meter_id: item.meter_id, //传递的参数
    							})
    						})
    					} else { 
    						uni.showToast({ 
    							icon: 'none',
    							title: '没有数据'
    						})
    					}
    				})

第二步：给页面上循环绑定值

<view class="contentblocks" v-for="(item,index) in baconlist">
    			<view class="bacon-btn">
    				
    				<u-button @tap="goinfo(item.meter_id)">查询</u-button>
    			</view>
    		</view>

第三步：实现跳转功能

goinfo(meterid) { 
    				console.log('仪表id'+meterid)
    				uni.navigateTo({ 
    					//meterid要在下个页面，通过option接受这个参数
    					url: `../XXX/XXX?meterid=${ meterid}`
    				})
    			}

--------------------

### 接受参数的页面（第四步） ###

//Page:newPage
    
    		onLoad(option) { 
    			this.meterid = option.meterid; //页面data定义一个meterid接受参数，用作本地值使用
    			console.log(this.meterid)
    		}

发表评论取消回复

表情：

评论列表（有 0 条评论，388人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstraptable查看详情_在详情页如何使用列表（也就是bootstrapTable）的图片点击事件？...

将下面代码放在backend-init.js文件中$('body').on('click', '\[data-tips-image\]', function () \{ va

冷不防/ 2023年01月01日 04:54/ 0 赞/ 128 阅读

相关 vue之面包屑首页/列表页 /列表详情页

vue之面包屑首页/列表页 /列表详情页座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人 -------------------- 文章目

Bertha 。/ 2022年12月26日 08:21/ 0 赞/ 150 阅读

相关 vue学习经验总结（实现详情页点击返回列表页保持原来页码）

1.在app.vue页面中设置是否缓存 ![20201109144717949.png][] 2.在router路由里面，设置对应的列表页设置是否缓存，通过meta判断

冷不防/ 2022年12月20日 01:58/ 0 赞/ 216 阅读

相关实战：点击查看详情

[实战：点击查看详情][Link 1] 简单描述需求： 1、顶部四个按钮代表功能，按下其中一个按钮，区域1列出这个功能的子模块；按下另一个按钮，这块区域显示的又是

缺乏、安全感/ 2022年04月24日 08:48/ 0 赞/ 144 阅读

相关 Vue项目详情页 - 使用递归组件实现详情页列表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

分手后的思念是犯贱/ 2022年04月13日 03:53/ 0 赞/ 499 阅读

相关 app分享后点击进入

需求：APP中分享出去的文章需要在其它应用打开后，通过右上角的打开还能跳转到相对应的APP详情页面用web打开自己app的协议，app未安装时跳转到appstore

Bertha 。/ 2022年03月14日 13:18/ 0 赞/ 288 阅读

相关点击列表，根据多条（参数）进入详情页

1.循环数据 2.绑定要传递的值到跳转上 3.通过绑定链接跳转 4.新页面通过onload(option)在页面加载初期获取数据 <view class=

﹏ヽ暗。殇╰゛Y/ 2021年09月07日 17:12/ 0 赞/ 321 阅读

相关根据不同的点击内容，展示数据（event）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

待我称王封你为后i/ 2021年09月07日 09:00/ 0 赞/ 340 阅读

相关点击列表，根据不同Id （参数）进入详情页

第一步：请求你要的参数第二步：跳转时把这个参数绑定在循环上第三步：实现功能，点击跳转对应页面第四步：接受参数使用第一步：请求

太过爱你忘了你带给我的痛/ 2021年09月07日 06:22/ 0 赞/ 389 阅读

相关 uniapp实战——点击商品列表导航至商品详情页

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

迷南。/ 2021年07月25日 17:30/ 0 赞/ 680 阅读