小程序携带参数跳转的方式wx.navigateTo的URL和通过data-传递

wxml代码：

<view class="case" bindtap="test_to_page" wx:for="{{list_info}}" wx:key="NUMBER" data-status="{{item.STATUS}}"data-id="{{item.ID}}">
</view>

我这里是点击一个循环的列表，点击每一个来判断最终跳转的页面，也就是在test_to_page里面通过STATUS的值来判断跳转的页面，代码在下面，其实就是在wxml上写一个data-啥啥啥我这里就是status，然后取值就是e.currentTarget.dataset.啥啥啥(status)

test_to_page: function (e) {if (e.currentTarget.dataset.status == "开票") {console.log("---------准备跳转开票页面---------")// console.log(e.currentTarget.dataset.id)携带的参数IDwx.navigateTo({url: '../node/node?id=' + e.currentTarget.dataset.id,})} else if (e.currentTarget.dataset.status == "申请") {console.log("---------准备跳转申请页面---------")wx.navigateTo({url: '../case_details/case_details?id=' + e.currentTarget.dataset.id,})} else if (e.currentTarget.dataset.status == "申辩") {console.log("---------准备跳转申辩页面---------")wx.navigateTo({url: '../defend_audit/defend_audit?id=' + e.currentTarget.dataset.id,})} else if (e.currentTarget.dataset.status == "缴款") {console.log("---------准备跳转缴款页面---------")wx.navigateTo({url: '../ticket/ticket?id=' + e.currentTarget.dataset.id,})}},

我这里还需要在URL中携带ID，就在URL中写上？id=，至于你自己需要携带啥自己修改后面就好了，要是多个参数的话&啥啥啥=啥啥啥。

wx.navigateTo({url: '../ticket/ticket?id=' + e.currentTarget.dataset.id,})

在跳转之后的页面取值是从：生命周期函数--监听页面加载的时候，通过一下方式获取：

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(options.id)},

小程序携带参数跳转的方式wx.navigateTo的URL和通过data-传递相关推荐

微信小程序携带参数的页面跳转
日常我们在手机app购物的时候,点击app主页琳琅满目的商品,就会跳转到商品的具体页面. 无论我们点击哪个商品,跳转到商品具体页面的布局都是一样的,但页面内的数据不一样,比如说商品名称,图片等等不一样 ...
微信小程序跳转另一个微信小程序携带参数并接收参数
当前微信小程序 wx.navigateToMiniProgram({appId: 'xxx', // 跳转小程序的appIdpath: '', // 跳转小程序的路径extraData: { // 需 ...
小程序页面之间跳转的方式
先导我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: wx.navigateTo(OBJECT) wx.redirectTo ...
微信小程序开发-页面跳转传递参数
微信小程序开发-页面跳转传递参数页面跳转有四种方式,分别为wx.navigateTo.wx.redirectTo.wx.reLaunch.wx.switchTab,前面三种可通过url路径携带参数实 ...
【微信小程序】页面跳转的四种方式
页面跳转 wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:"保留当前页面,跳转到应用内的某个页面"类似于html中的 window.locati ...
微信小程序页面A携带参数跳转到页面B，页面B获取页面A传来的参数并且存到data里面，在页面B中渲染成功
页面A的wxml <view class="tuijian-food-box" ><view class="tuijian-food" wx: ...
vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
小程序与小程序之间相互跳转、传值、接收参数、navigator、navigateToMiniProgram
小程序之间相互跳转的2种方法,以及接收另一个小程序传参目录一.通过标签 navigator 直接跳转二.通过事件触发 wx.navigateToMiniProgram 跳转三.小程序接收另一个 ...
小程序中实现两个或者多个小程序之间互相跳转
前言: 小程序中实现两个或者多个小程序之间互相跳转,a小程序带参跳转到b小程序中. 官方入口:wx.navigateToMiniProgram(Object object) 点我https://dev ...
微信小程序四种父子相互传值方式
微信小程序四种父子相互传值方式 1. 绑定自定义属性(父传子),触发自定义方法 (子传父) 原生微信小程序+uni-app都可以实现父组件: <template><view cla ...

小程序携带参数跳转的方式wx.navigateTo的URL和通过data-传递

小程序携带参数跳转的方式wx.navigateTo的URL和通过data-传递相关推荐

最新文章

热门文章