uniapp pages.json 配置

黄同学real

已于 2023-04-26 15:48:45 修改

阅读量2.1k

点赞数 2

分类专栏：前端 javascript vue 文章标签： vue uni-app app 小程序 javascript

于 2021-08-20 18:12:00 首次发布

本文链接：https://blog.csdn.net/qq_39939748/article/details/119828442

版权

前端同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

本文详细介绍了uni-app的pages.json配置，包括下拉刷新、原生子窗体和原生导航栏的设置。通过示例展示了如何启用下拉刷新、自定义导航栏样式以及实现原生导航栏的按钮点击事件。同时，讲解了vue文件中处理刷新数据的方法以及子窗体间的通信。

摘要由CSDN通过智能技术生成

uniapp pages.json 配置 - 下拉刷新 - 原生子窗体 - 原生导航栏

pages.json 基础配置 -下拉刷新 - 原生子窗体 - 原生导航栏



{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle": "custom", //取消原生导航栏失效
				"enablePullDownRefresh": true, //trun 允许下拉 false 不允许
				"app-plus": { //App 平台时的特定样式
					"pullToRefresh": { //下拉刷新
						"style": "circle", //"circle"——圆圈样式下拉刷新控件样式
						"color": "#FFD101" //颜色值格式为"#RRGGBB"，仅"circle"样式下拉刷新支持此属性
					}
				}
			}
		},
		{
			"path": "pages/commerce/commerce",
			"style": {
				"navigationBarTitleText": "好物", //导航栏标题文字内容
				"app-plus": {	//App 平台时的特定样式
				"subNVues": [{ //原生子窗体
						"id": "bottons", // 唯一标识 
						"path": "details/subNVue/bottons", // 页面路径  
						/*"type": "popup",  这里不需要*/
						"style": {
							"position": "absolute",
							"height": "150rpx",
							"bottom": "0rpx"
						}
					}],
					"titleNView": { //导航栏
							"type": "transparent", //透明渐变导航栏
							"autoBackButton": true, //标题栏控件是否显示左侧返回按钮
							"buttons": [{ 	//自定义按钮
								"type": "none",
								"background": "rgba(0,0,0,0)", //按钮的背景颜色，仅在标题栏type=transparent时生效
								"badgeText": "", //角标文本，最多显示3个字符，超过则显示为...
								"fontSrc": "/static/iconfont/iconfont.ttf", //按钮上文字使用的字体文件路径。不支持网络地址，请统一使用本地地址。
								"fontSize": "30px",
								"text": "\ue618"  //原生标题栏增加消息按钮，点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
							}],
							"searchInput": { //搜索框配置
								"backgroundColor": "#f5f5f5", //背景颜色
								"borderRadius": "6px", //输入框圆角
								"placeholder": "请输入搜索内容",
								"align": "center" //非输入状态下文本的对齐方式。可取值： "left" - 居左对齐； "right" - 居右对齐； "center" - 居中对齐。
							},
							"backButton": { //自定义返回按钮的样式
								"background": "rgba(0,0,0,0)"
							},
							"coverage": "200px", //标题栏控件变化作用范围
							"titleText": "二手房", //标题文字内容
							"titleAlign": "left"
						}
				}
			}
		},
	]
}

vue 文件处理刷新数据


	//下拉属性方法
	onPullDownRefresh() {
		//调用数据方法
		this.getHomeData();
		//延时调用
		setTimeout(function() {
			//停止刷新动作
			uni.stopPullDownRefresh();
		}, 500)
	},

vue 文件处理原生导航栏【按钮点击事件】

	
	//原生导航栏 【按钮点击事件】
	onNavigationBarButtonTap(e) {
		//获取导航按钮下标
		if (e.index == 0) {
			//执行行为操作-跳转页面
			uni.navigateTo({
				url: '/detailspages/message/message'
			});
		}
	},
	
	// #ifdef APP-PLUS
	let pages = getCurrentPages();
	let page = pages[pages.length - 1];
	let currentWebview = page.$getAppWebview();
	//修改按钮文本及颜色
	currentWebview.setTitleNViewButtonStyle(2, {
		text: '\ue613',
		color: '#333332'
	});
	// #endif

vue 抛出数据 subNVue 接收数据


//vue 抛出数据
let that = this;
uni.$emit('page-send', {
	proxyUser: that.proxyUser,
	detailData: that.detailData,
	ossURL: that.ossURL + '/appres/v2/floor.png',
})


//subNVue 中接收数据
let that = this;
//下面的数据是我在vue文件绑定的数据拿到的,写在onLoad事件方法下
uni.$on('page-send', data => {
	console.log("监听到了");
	that.proxyUser = data.proxyUser;
	that.detailData = data.detailData;
	that.ossURL = data.ossURL;
	console.log(data);
})