php网页微信小程序没有返回按钮

php网页微信小程序没有返回按钮,第1张

1 确实没有返回按钮。

2 这是因为微信小程序的设计理念是通过底部导航栏来进行页面跳转,而不是通过返回按钮。

这样可以让用户更加快速和方便地切换不同的页面,提高用户体验。

3 如果你需要添加返回按钮,可以在页面顶部自行设计一个返回按钮,并绑定相应的事件处理函数。

但需要注意的是,这种做法可能会违反微信小程序的设计规范,影响用户体验。

一、设置自定义顶部导航

Navigation是小程序的顶部导航组件,当页面配置 navigationStyle 设置为 custom 的时候可以使用此组件替代原生导航栏。

1.全局顶部导航自定义,在app.json的“window”里添加"navigationStyle": "custom"

2.只在某一个页面自定义顶部导航,在该页面的json文件里添加"navigationStyle": "custom"

二、具体的导航块根据需要自行书写

1、tabBar

在app.json文件中添加tabBar节点。tabBar是小程序客户端底部或顶部tab栏的实现。

(1)tabBar相关属性

color:tab上的文字默认颜色,仅支持十六进制颜色。

selectedColor:tab上的文字选中时的颜色,仅支持十六进制颜色。

backgroundColor:tab的背景色,仅支持十六进制颜色。

borderStyle:tabbar上边框的颜色, 仅支持 black / white。

position:tabBar的位置,默认值是: bottom,仅支持 bottom / top。当 position 为 top 时,不显示 icon。

custom:自定义tabBar。

"tabBar": {

    "color": "#000000",

    "selectedColor": "#336699",

    "backgroundColor": "#ffffff",

    "borderStyle": "black",

    "position": "bottom"

  }

(2)list

list:tab的列表。

list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。

pagePath:页面路径,必须在pages 中先定义。

text:tab 上按钮文字。

iconPath:图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。selectedIconPath:选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。

    "list": [

      {

        "text": "首页",

        "pagePath": "pages/index/index",

        "iconPath": "assets/icon/home.png",

        "selectedIconPath": "assets/icon/home2.png"

      },

      {

        "text": "列表",

        "pagePath": "pages/list/list",

        "iconPath": "assets/icon/list.png",

        "selectedIconPath": "assets/icon/list2.png"

      }

]

2、页面跳转

(1)跳转普通页面

方法① navigator组件

 <!-- 跳转到普通页,可以通过返回按钮返回 -->

 <navigator url="../detail/detail">到详情页</navigator>

方法② navigateTo()方法

navigateTo()方法,用于跳转普通页面。

<view bindtap="gotoDetail">到详情页</view>

gotoDetail(){

    //使用全局api跳转,navigateTo()方法,用于跳转普通页面

    wx.navigateTo({

      url: '../detail/detail',

    })

   }

(2)跳转tabBar页面

方法① navigator组件

如果要使用navigator组件跳转tabBar页面,需要设置open-type="switchTab"。

 <!-- 跳转到tabBar页面,不可以通过返回按钮返回。因为跳转到指定的tabBar页面后,会关闭其他所有页面 -->

<navigator url="../list/list" open-type="switchTab">到列表页</navigator>                                                                                      

方法② switchTab()方法

switchTab()方法,用于跳转tabBar页面。

  <view bindtap="gotoList">到列表页</view>

gotoList(){

    wx.switchTab({

      url: '../list/list',

    })

  }


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11917732.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存