小程序中页面跳转方法
2017-09-29 16:22
169 查看
第一种方法:
应用导航组件 navigator 组件跳转,并把数据传递到下一个页面中。
代码示例如下:
<view class="order">
<block wx:for="{{src}}" wx:key="{{item.id}}">
<view class="order-block">
<navigator url="../order/order?id={{item.id}}&name={{item.name}}">
<image style="width:60rpx;height:60rpx;" src="{{item.img}}"></image>
<view style="font-size:28rpx;line-height:60rpx;">{{item.name}}</view>
</navigator>
</view>
</block>
</view>
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var id=options.id;
this.setData({
currentTabsIndex:id
})
},
第二张方法:
应用小程序的api中的wx.navigateTo(object),这种方法也可以把数据传递到下一个页面中
代码示例如下:
应用导航组件 navigator 组件跳转,并把数据传递到下一个页面中。
代码示例如下:
<view class="order">
<block wx:for="{{src}}" wx:key="{{item.id}}">
<view class="order-block">
<navigator url="../order/order?id={{item.id}}&name={{item.name}}">
<image style="width:60rpx;height:60rpx;" src="{{item.img}}"></image>
<view style="font-size:28rpx;line-height:60rpx;">{{item.name}}</view>
</navigator>
</view>
</block>
</view>
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var id=options.id;
this.setData({
currentTabsIndex:id
})
},
第二张方法:
应用小程序的api中的wx.navigateTo(object),这种方法也可以把数据传递到下一个页面中
代码示例如下:
wx.navigateTo({ url: 'test?id=1' })
//test.js Page({ onLoad: function(option){ console.log(option.query) } })
如果对于tabbar中的页面应用微信小程序中的wx.switchTab(object)
//跳转到购物车 tapToCart:function(){ wx.switchTab({ url:'/pages/cart/cart' }) },
相关文章推荐
- 微信小程序出现wx.navigateTo页面不跳转问题的解决方法
- [微信小程序]页面跳转对象参数的传递方法
- 微信小程序 跳转页面的两种方法详解
- 小程序 三种方法 页面跳转
- 微信小程序 跳转页面的两种方法详解
- 微信小程序 跳转页面的两种方法详解
- 微信小程序实现页面跳转传值的方法
- 微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
- 微信小程序页面跳转传值以及获取值方法
- 微信小程序实现页面跳转传值以及获取值的方法分析
- 微信小程序--跳转页面的两种方法详解
- 微信小程序 页面跳转传递值几种方法详解
- 如何一启动web程序,直接访问某个controller里的方法进而跳转页面
- SilverLight浏览器交互之:Html页面通过Javascript调用SilverLight程序内方法(附源码)
- js中页面刷新和页面跳转的方法总结
- 微信小程序之页面跳转、传参
- ASP.NET页面跳转的几种方法
- asp.net跳转页面的三种方法比较(转)
- Android卸载程序之后跳转到指定的反馈页面
- jQuery Mobile页面跳转后,无法加载js中的方法