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);
})


Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐