2.11版小程序从头像页跳转到自定义tabrar

1在"pages/index/js"下改写 wx.switchTab 和跳转地址’/nav/index’bindViewTap: function() { wx.switchTab({ url: '/nav/index' }) },2 在app/json 中添加 “nav/index”, 和 “nav/index2”, 确定,保存 得到两个页面"pages":[ "pages/index/index", "nav/index", "nav
摘要由CSDN通过智能技术生成

1在"pages/index/js"下改写 wx.switchTab 和跳转地址’/nav/index’

bindViewTap: function() {
    wx.switchTab({
      url: '/nav/index'
    })
  },

在这里插入图片描述

2 在app/json 中添加 “nav/index”, 和 “nav/index2”, 确定,保存 得到两个页面

"pages":[
    "pages/index/index",
    "nav/index",
    "nav/index2",

在这里插入图片描述

3 预览https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html的自定义tabbar 把 custom-tab-bar 和image 两个文件夹黏贴到自己的项目中 黏贴到根目录下
在这里插入图片描述
4修改 custom-tab-bar /index.js

 list: [{
      pagePath: "/nav/index",
      iconPath: "/image/icon_component.png",
      selectedIconPath: "/image/icon_component_HL.png",
      text: "组件"

 {
      pagePath: "/nav/index2",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",

在这里插入图片描述
5修改app.json

    "pages/logs/logs"
  ],
  "tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "nav/index",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "组件"
      },
      {
        "pagePath": "nav/index2",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "卡在那里"
      }
    ]
  },
  "window":{
    "backgroundTextStyle":"light",

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
非常抱歉,我理解有误。要实现跳转自定义小程序面,你需要在 `<a>` 标签中添加小程序的相关参数,具体如下: ```html <a href="weixin://navigateToMiniProgram?appId=小程序的AppID&path=自定义面的路径">跳转小程序自定义面</a> ``` 其中,`appId` 是你的小程序的 AppID,`path` 是你自定义面的路径。你需要将这些参数替换成你自己的。 同时,由于微信小程序的限制,在 iOS 中必须要在用户点击后触发事件(例如 `touchstart` 或 `click`),才能正常打开小程序。因此,你还需要添加一个 JavaScript 代码段,用于触发事件。完整代码如下: ```html <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="weixin://navigateToMiniProgram?appId=小程序的AppID&path=自定义面的路径" onclick="javascript:window.location.href='weixin://navigateToMiniProgram?appId=小程序的AppID&path=自定义面的路径';"><img src="https://www.example.com/image1.jpg" alt="image1"></a> </div> <div class="swiper-slide"> <a href="weixin://navigateToMiniProgram?appId=小程序的AppID&path=自定义面的路径" onclick="javascript:window.location.href='weixin://navigateToMiniProgram?appId=小程序的AppID&path=自定义面的路径';"><img src="https://www.example.com/image2.jpg" alt="image2"></a> </div> <div class="swiper-slide"> <a href="weixin://navigateToMiniProgram?appId=小程序的AppID&path=自定义面的路径" onclick="javascript:window.location.href='weixin://navigateToMiniProgram?appId=小程序的AppID&path=自定义面的路径';"><img src="https://www.example.com/image3.jpg" alt="image3"></a> </div> </div> <div class="swiper-pagination"></div> </div> ``` 请注意,以上代码仅供参考,具体实现还需要根据你的具体需求进行调整。同时,你需要将小程序的 AppID 和自定义面的路径替换成你自己的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值