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

太过爱你忘了你带给我的痛 2021-09-07 06:22 425阅读 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 条评论，425人围观）

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

相关阅读

相关 windows adb根据id点击按钮

在 Windows 上使用 adb 根据控件的 ID 来模拟点击按钮，可以使用以下命令： 1. 查看当前屏幕上的所有控件信息，并将其保存到文件中：

系统管理员/ 2023年10月14日 21:39/ 0 赞/ 4 阅读

相关 Vue根据点击不同的文字改变图片

Vue根据点击不同的文字替换图片 html代码 <!-- 在还没有点击文字的时候，这个时候图片的位置是空的，如果需要我们可以在发起请求后直接先赋值上去 me.i

淩亂°似流年/ 2023年06月30日 08:57/ 0 赞/ 7 阅读

相关详情页返回列表页当前位置

利用keepAlive 在app.vue中写两个 <keep-alive>  <router-vie

Bertha 。/ 2023年02月21日 11:42/ 0 赞/ 20 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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