微信小程序 页面跳转传参详解

微信小程序 页面跳转传参，做微信小程序必定会用的这样的功能，这里就记录下本人学习实现代码资料。

刚接触微信小程序，多里面的语法和属性还不怎么聊解，如有不多的地方希望各位大神多多指教。今天来说下微信小程序怎么跳转和传参，话不多说直接上代码。

实现的功能是给列表增加点击功能传参到下一页；

代码如下：

<import src="../WXtemplate/headerTemplate.wxml"/>
<view>
 <!--滚动图-->
 <view>
 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoPlay}}" interval="{{intervalTime}}" duration="{{Time}}">
 <block wx:for="{{imageURl}}">
  <swiper-item>
   <image src="{{item}}" class="imagePX"></image>
  </swiper-item>
 </block>
 </swiper>
 </view>
 <!--功能按钮-->
 <view class="section-bg">
 <block wx:for="{{buttonNum}}">
  <!--模版-->
  <template is="buttonList" data="{{item}}"/>
  <!--<view class="section-item">
  <image class="section-img" src="{{item.image}}"></image>
  <text class="section-text">{{item.text}}</text>
 </view>-->
 </block>
 </view>
 <!--资讯列表-->
 <view>
 <block wx:for="{{listNum}}">
  <template is="newList" data="{{item,index}}"/>
 </block> 

 </view> 

 </view>

其中

<template is="buttonList" data="{{item}}"/>

为模版代码如下

<template name="buttonList">
 <view class="section-item">
  <image class="section-img" src="{{item.image}}" bindtap="buttonClick"></image>
  <text class="section-text">{{item.text}}</text>
 </view>
</template> 

<!--list-->
<template name="newList">
 <view class="section-list" bindtap="listClick" id="{{index}}">
 <view>
  <image class="list-img" src="{{item.image}}"></image>
 </view> 

  <view class="section-textt">
  <view class="title"><text>{{item.title}}</text></view>
  <view class="subTitle"><text>{{item.subTitle}}</text></view>
 </view>
 </view> 

</template>

这里只为下面的列表增加了点击方法

点击列表js代码

listClick:function(event){
 console.log(event);
 var p = event.currentTarget.id 

 wx.navigateTo({url:'/pages/xiangqing/xiangqing?id=上一页的参数'})
 }

其中

wx.navigateTo({url:'/pages/xiangqing/xiangqing?id=上一页的参数'})

为跳转方法，id为需要传的参数 如果参数为动态参数代码如下：

listClick:function(event){
 console.log(event);
 var p = event.currentTarget.id 

 wx.navigateTo({url:'/pages/xiangqing/xiangqing?id='+p})
 }

其中p为上面为每一行设置的id值

在下一页取值代码如下：

 data:{
 // text:"这是一个页面"
 title:''
 },
 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 this.setData({
 title:options.id
 })

然后在页面上显示代码如下：

<view>{{title}}</view>

最终实现效果：

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 微信小程序 跳转页面的两种方法详解

    微信小程序 跳转页面的两种方法详解

    微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: 1,在wxml页面中: <navigator url="../index/index">跳转到新页面</navigator> <navigator url="../index/index" open-type="redirect">在当前页打开</navigator> <navigator url="../i

  • 微信小程序 input输入框控件详解及实例（多种示例）

    微信小程序 input输入框控件详解及实例（多种示例）

    微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下: <!--index.wxml--> <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添

  • 微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解 最近在做微信小程序上传头像和上传照片功能就随手写一下代码: 上传头像html: <view class="edit-list"> <text class="list-name list-first">头像</text> <view class="edit-righr-bar"> <image class="head-portrait" src

  • 微信小程序 实战小程序实例

    微信小程序 实战小程序实例

    微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start. 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳转传值使用 等等等.... app.json全局配置文件 { "pages":[ "page

  • 微信小程序 传值取值的几种方法总结

    微信小程序 传值取值的几种方法总结

    微信小程序 传值取值 小程序里常见的取值有以下几种,一个完整的项目写下来,用到的概率几乎是100%. 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可 1.1 生成值 <image src="../../../images/icon_delete.png" /><text>删除&l

  • 微信小程序 获取微信OpenId详解及实例代码

    微信小程序 获取微信OpenId详解及实例代码

    获取微信OpenId 先获取code 再通过code获取authtoken,从authtoken中取出openid给前台 微信端一定不要忘记设定网页账号中的授权回调页面域名 流程图如下 主要代码 页面js代码 /* 写cookie */ function setCookie(name, value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); doc

  • 微信小程序开发（二）图片上传+服务端接收详解

    微信小程序开发（二）图片上传+服务端接收详解

    这次介绍下小程序当中常用的图片上传. 前几天做了图片上传功能,被坑了一下.接下来我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的PHP,只能自己去改接收图片的接口. 看一下页面效果图 一个很常见的修改头像效果,选择图片(拍照),然后上传. 下面就是贴代码了 首先是小程序的wxml代码 <view class="xd-container">

  • 微信小程序-消息提示框实例

    微信小程序-消息提示框实例

    做Android的时候对toast是很熟悉的.微信小程序开发中toast也是重要的消息提示方式. 提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) wx.hideToast() 隐藏消息提示框 wx.showToast({ title: '加载中', icon: 'loading', duration: 10000 }

  • 微信小程序 页面跳转传参详解

    微信小程序 页面跳转传参详解

    微信小程序 页面跳转传参,做微信小程序必定会用的这样的功能,这里就记录下本人学习实现代码资料. 刚接触微信小程序,多里面的语法和属性还不怎么聊解,如有不多的地方希望各位大神多多指教.今天来说下微信小程序怎么跳转和传参,话不多说直接上代码. 实现的功能是给列表增加点击功能传参到下一页: 代码如下: <import src="../WXtemplate/headerTemplate.wxml"/> <view> <!--滚动图--> <view&g

  • 微信小程序 页面滑动事件的实例详解

    微信小程序--页面滑动事件 wxml: <view id="id" class = "ball" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend" style = "width : 10

  • 微信小程序 页面跳转及数据传递详解

    微信小程序 页面跳转及数据传递详解 类似 Android 的 Intent 传值,微信小程序也一样可以传值: 例如:wxml 中写了一个函数跳转: <view class="itemWeight" catchtap="jumpToOverMissionList"> <view class="textStatus">已完成任务</view> <view class="containVertical

  • 微信小程序 页面跳转事件绑定的实例详解

    微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap

  • 微信小程序 页面跳转传值实现代码

    微信小程序 页面跳转传值实现代码

    微信小程序 页面跳转传值实现代码 微信小程序的页面路径只能是五层: 现在场景如下: index(首页)打开新页面 list(列表)打开新页面search(条件查询)确定条件返回 list(列表): 这里有个限制,微信只能打开五层网页,意味着:在search页面点击确定的时候是要返回上一页: wx.navigateBack(OBJECT) 该api是无法带参数返回上一页的,微信给出的方法是在全局变量里面添加对象:(真特么操蛋) app.js加入变量search search:'', 后续js头部全

  • 微信小程序 页面跳转和数据传递实例详解

    微信小程序 页面跳转和数据传递 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navigateBack(OBJECT) 5.使用实现对应的跳转功能: 分析: 其中navigateTo是将原来的页面保存在页面栈中,在跳入到下一个页面的时

  • 微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值 微信小程序导航有两种形式:一种是在写在js中进行跳转,另一种是写在wxml页面中进行跳转. 1.js导航 (1).wx.navigateTo(OBJECT) :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navigateTo({ url: 'test?id=1' }) 获取传递的值: //test.js Page({ onLoad: function(option){ console.log(option.id)

  • 微信小程序 页面跳转如何实现传值

    微信小程序 页面跳转如何实现传值 (1)页面跳转如何传值(实现跳转到不同页面) 点击页面 WXML:加入自定义属性(data-category="{{categoryTitle}}") <view class="more" catchtap="onMoreTap" data-category="{{categoryTitle}}"> js:在event中取出category值并加到URL中 onMoreTap:fu

  • 微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图 从左边的列表页调到右边的详情页 二.页面之间的跳转 首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi

  • 微信小程序 获取二维码实例详解

     微信小程序 获取二维码实例详解 理论: 接口A: 适用于需要的码数量较少的业务场景 接口地址:(永久有效,数量有限,进入path对应的页面) https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN path String 不能为空,最大长度 128 字节 width Int 430(默认) 二维码的宽度 auto_color .. line_color .. 接口B:适用于需要的码数量极多,或仅临时使用的业务场景(永

随机推荐