微信小程序> 微信小程序页面跳转组件navigator

微信小程序页面跳转组件navigator

浏览量:501 时间: 来源:黄宝康

官方navigator组件文档 https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

在index.wxml文件中定义一个navigator

<navigator url="../list/list">访问list列表页</navigator>

跳转的页面是…/list/list

list.wxml文件的内容

<view>这里是列表页,huangbaokang</view>

编译测试,跳转默认是当前小程序跳转,跳转之后有一个回退的按钮。
小程序
如果open-type=“redirect”,在没有回退箭头。
增加点击时相关样式

index.wxml

<navigator url="../list/list" hover-class="buleTheme" >访问list列表页</navigator>

index.wxss

.buleTheme{  color: blue;}

跳转到新页面参数传递

<!--index.wxml--><navigator url="../list/list?author=huangbaokang" >访问list列表页</navigator>
<!--list.wxml--><view>这里是列表页,{{author}}</view>
<!--list.js-->/**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    this.setData({      author : options.author    })  },

如果open-type=“switchTab”,则url不支持queryString

<!--index.wxml--><navigator url="../list/list" open-type="switchTab" >马上去支付</navigator>
<!--list.wxml--><view>支付中心页面</view>

app.json配置tabBar

  "tabBar": {    "list": [{      "pagePath": "pages/index/index",      "text": "huangbaokang"    },    {      "pagePath": "pages/list/list",      "text": "支付中心"    }    ]  },

小程序

点击去支付,将跳转tabBar
小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎