微信小程序(页面跳转详解)
2017-02-25 10:12
861 查看
本例中实现页面跳转主要用到了一下几个页面,分别是:
下面是posts.wxml文件:
①该页面就是跳转之前的页面,首先使用了一个block标签,在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item,可能大家会说在这里为什么还要使用wx:key=”{{index}}呢?因为如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 中的输入内容, 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。如果不使用wx:key=”{{index}}的话,可能会发出警告信息,如图所示:
![](https://img-blog.csdn.net/20170225095925322?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXNvYmxl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
这里的data-postid=”{{item.postId}}”是自定义属性,为下面的页面跳转传参做准备,在组件中可以定义数据,这些数据将会通过事件传递给service。书写方式为:以data-开头,多个单词由连字符“”-“”连接,不能有大写(大写会自动转换成小写)如data-element-type,最终会在event.currentTarget.dataset中会将字符串转成驼峰。elementType。
②这里的一段代码是为了引入template模板。
下面是template模板文件代码:
③下面是posts.js文件:
这里的
是带参跳转的,一个参数就用’post-detail/post-detail?id=’+postId,如果多个参数就用’post-detail/post-detail?id=’+postId+‘abc=’+’123’,那么如何在新的页面里接收页面传递过去的参数呢?
很简单,在onLoad函数里面来接收,如下:
在onLoad生命周期函数,在一个页面中只会加载一次,在onLoad声明周期函数中,option为页面跳转所带来的参数
下面是posts.wxml文件:
<import src="post-item/post-item-template.wxml"/> <block wx:for="{{posts_key}}" wx:key="{{index}}"> <!--使用模板--> <view catchtap="onPostTap" data-postid="{{item.postId}}"> <template is="postItem" data="{{...item}}" /> </view> </block>
①该页面就是跳转之前的页面,首先使用了一个block标签,在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item,可能大家会说在这里为什么还要使用wx:key=”{{index}}呢?因为如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 中的输入内容, 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。如果不使用wx:key=”{{index}}的话,可能会发出警告信息,如图所示:
这里的data-postid=”{{item.postId}}”是自定义属性,为下面的页面跳转传参做准备,在组件中可以定义数据,这些数据将会通过事件传递给service。书写方式为:以data-开头,多个单词由连字符“”-“”连接,不能有大写(大写会自动转换成小写)如data-element-type,最终会在event.currentTarget.dataset中会将字符串转成驼峰。elementType。
②这里的一段代码是为了引入template模板。
下面是template模板文件代码:
<template name="postItem"> <view class="post-container"> <view class="post-author-date"> <image class="post-author" src="{{avatar}}"> </image> <text class="post-date">{{date}}</text> </view> <text class="post-title">{{title}}</text> <image class="post-image" src="{{imgSrc}}"></image> <text class="post-content">{{content}}</text> <view class="post-like"> <image class="post-like-image" src="../../images/icon/chat.png"></image> <text class="post-like-font">{{collection}}</text> <image class="post-like-image" src="../../images/icon/view.png"></image> <text class="post-like-font">{{reading}}</text> </view> </view> </template>
③下面是posts.js文件:
//引入数据文件 var postsData=require("../../data/posts-data.js"); Page({ data:{ }, onLoad:function(options){ //页面初始化,options为页面跳转所带来的参数 this.setData({ posts_key:postsData.postList }); }, onPostTap:function(event){ var postId = event.currentTarget.dataset.postid; // console.log("postId is"+postId); wx.navigateTo({ url: 'post-detail/post-detail?id='+postId }) } })
这里的
wx.navigateTo({ url: 'post-detail/post-detail?id='+postId })
是带参跳转的,一个参数就用’post-detail/post-detail?id=’+postId,如果多个参数就用’post-detail/post-detail?id=’+postId+‘abc=’+’123’,那么如何在新的页面里接收页面传递过去的参数呢?
很简单,在onLoad函数里面来接收,如下:
var postsData=require("../../../data/posts-data.js") Page({ onLoad:function(option acbd ){ //onLoad生命周期函数,在一个页面中只会加载一次 //在onLoad声明周期函数中,option为页面跳转所带来的参数 console.log(option); var postId = option.id; var postData = postsData.postList[postId]; //console.log(postData); //this.setData做数据绑定 //目前不能使用this.data this.setData( { postData:postData } ) //console.log(postData); } })
在onLoad生命周期函数,在一个页面中只会加载一次,在onLoad声明周期函数中,option为页面跳转所带来的参数
相关文章推荐
- 微信小程序 页面跳转传递值几种方法详解
- 详解微信小程序 页面跳转 传递参数
- 微信小程序 详解页面跳转与返回并回传数据
- 微信小程序详解——页面之间的跳转方式【路由】和参数传递
- 微信小程序 跳转页面的两种方法详解
- 微信小程序 页面跳转事件绑定的实例详解
- 微信小程序 跳转页面的两种方法详解
- 微信小程序 跳转页面的两种方法详解
- 微信小程序--跳转页面的两种方法详解
- 微信小程序详解——页面之间的跳转方式【路由】和参数传递
- 微信小程序 页面跳转传参详解
- 微信小程序 页面跳转及数据传递详解
- 微信小程序 页面跳转和数据传递实例详解
- 微信小程序 页面跳转和数据传递实例详解
- 微信小程序详解——页面之间的跳转方式【路由】和参数传递
- 微信小程序——页面跳转
- 微信小程序页面跳转并传参
- 微信小程序的页面跳转
- 微信小程序实现页面内的跳转——scroll-view
- 【微信小程序之页面跳转】从列表的item项跳转到下一个页面