swiper 定义放多少张图片_uni-app 微信小程序 uView 实现沉浸式自定义导航栏+tabs吸顶...

使用uniapp 开发微信小程序 用uView UI框架，实现沉浸式自定义导航栏+tabs吸顶效果：

效果图1：

效果图-1（未滚动状态）

效果图2：

效果图-2（滚动状态下）

【1】隐藏原生小程序顶部导航栏，配置为自定义模式：

// pages.json
"pages": [
		{
      
			"path": "pages/bazaar/index",
			"style" : {
      
				"navigationStyle": "custom",
				"navigationBarTextStyle": "white"
			}
		}
          ]

【2】页面中使用uView自定义导航栏、吸顶、tabs组件（设置导航栏高度高度为44px）：

【3】重写吸顶距离（setOffestTop方法）：

【4】下拉后滚回到顶部，吸顶无法回到原位问题修复（手动添加tab高度）：