微信小程序-日常开发体验提升小巧思--持续更新

莫桐2026-01-21 8:17

1. 自定义顶部导航栏------home键和返回按钮显示处理

自定义的导航栏需要开发自己添加返回按钮，如果小程序页面没有上一页可以返回时，调用 wx.navigateBack() 就没有效果了。

这种情况下，需要添加一个home键，点击跳转小程序首页。

可以通过 getCurrentPages() 判断当前页面是否有上一页。

javascript 复制代码

// getCurrentPages() 获取历史访问页面数据，长度大于1是，说明包含上一页
let isRouteBack = getCurrentPages().length - 1 > 0 
this.setDate({
	isBack: isRouteBack
})

2. 返回按钮无效处理

假设有些页面不能跳转home，只能放置一个返回按钮。

当页面没有上一页时，返回按钮点击就没有任何效果。

此时可以在返回失败时添加其他操作。

javascript 复制代码

wx.navigateBack({
      delta: 1,
      fail: (res) => {
        // 1、直接关闭小程序
        // wx.exitMiniProgram()
        // 2、跳转某个页面
        wx.redirectTo({
          url: '/pages/home/index',
        })
      }
})

3. IOS下拉露出底部灰色背景处理

1、使用css布局

css布局很简单，只要将父容器设置为overflow: hidden 即可，但是这种只适合简单的页面。

如果页面需要监听页面滑动，进行一些操作，这种方式就不好用了。

2、使用scroll-view
scroll-view 标签中有一个属性：bounces，iOS 下 scroll-view 边界弹性控制。搭配属性 enhanced 一起使用。

html 复制代码

<scroll-view 
	scroll-y="{{true}}" 
	enhanced="{{true}}" 
	bounces="{{false}}"
	style="height: 100vh;"
	bindscrolltolower="onReachBottom"
	bindscroll="onScroll"
>

</scroll-view>