uniapp在顶部处添加按钮 和 动态修改标题、按钮文本

6 篇文章 0 订阅

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: '完成',    
			// });
		},
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值