uniapp在顶部处添加按钮 和 对应的事件

添加按钮:
在pages.json中配置app-plus

,{
		    "path" : "pages/myCollection/index",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "我的收藏",
				"navigationBarBackgroundColor":"#FFFFFF",
		        "enablePullDownRefresh": true,
				"app-plus":{
					"titleNView": {
						"buttons": [{"text":"管理","fontSize":"26rpx"}]
					}
				}
		    }
		}

app-plus还可以配置分享图标等

"app-plus":{
	"bounce":"none",
	"titleNView": {
		"titleText": "",
		"blurEffect": "light",
		"coverage": "440rpx",
		"type": "transparent",
		"buttons": [
			{
				"type": "share",
				"fontSize": "56rpx",
				"background": "rgba(0,0,0,0)"
			}
		],
		"backButton":{
			"fontSize": "56rpx",
			"background": "rgba(0,0,0,0)"
			
		}
	}
}

顶部按钮所触发的事件onNavigationBarButtonTap,和修改其文本

//修改标题
uni.setNavigationBarTitle({
		title: "结束语"
  });
onNavigationBarButtonTap(e) {//点击事件
			console.log("success-------------",e)		
			// uni.setNavigationBarTitle({
			// 	title: "结束语"
			// });
			// let flag = true
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			var currentWebview = page.$getAppWebview();
			var tn = currentWebview.getStyle().titleNView;
			//在data中添加flag默认为true
			console.log("180-------------",tn,this.flag)
			//修改按钮文本文本
			if(this.flag){
				tn.buttons[0].text = '完成';
				currentWebview.setStyle({
				    titleNView: tn
				});
				this.flag=false
				// this.checkbox=true
			}else{
				tn.buttons[0].text = '管理';
				currentWebview.setStyle({
				    titleNView: tn
				});
				this.flag=true
				// this.checkbox=false
			}
			
			
			// 修改buttons    
			// index: 按钮索引, style {WebviewTitleNViewButtonStyles }    
			// webView.setTitleNViewButtonStyle(0, {    
			//       text: '完成',    
			// });
		},
Logo

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

更多推荐