微信小程序－跳转传参

来源：互联网发布：自学黑帽seo 编辑：程序博客网时间：2024/05/17 22:14

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

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

代码如下：

<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为需要传的参数 如果参数为动态参数代码如下：

<pre name="code" class="javascript"> listClick:function(event){      console.log(event);     var p = event.currentTarget.id          wx.navigateTo({url:'/pages/xiangqing/xiangqing?id='+p})    }

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

在下一页取值代码如下：

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

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

<pre name="code" class="html"><view>{{title}}</view>

最终实现效果：

如有不妥之处希望多多指教，转载请标明出处！谢谢

1 0