uniapp app兼容性问题 动态控制右上角按钮显示隐藏 隐藏titleNView 下拉刷新 关闭下拉刷新的圈圈《冤种日常》

15 篇文章 0 订阅
4 篇文章 0 订阅

有一个很尴尬的情况,下面两种情况并不能一起生效,所以如果是打包成app只用下面的就可以,如果多端可以把上面的也加上,判断一下有没有元素再设置style
建议把这种方法写在下面一点,不然报错了下面的代码就不走了,也不会报错(冤种)
(只使用app的方式,h5上调试写在下面的代码老是走不到也不报错,我真的会谢好嘛)

设置右上角按钮

"style": {
	"enablePullDownRefresh": true,// 页面下拉刷新(下面有细节)
	"navigationBarTitleText": " 页面名称",// 页面名称
	"titleNView": {
		"autoBackButton": "true",// 左边返回按钮
		"buttons": [{
			"id": "1",
			"float": "right",
			"fontSize": "15px",
			"fontSrc": "/static/iconfont/iconfont.ttf",// 也可以使用字体icon
			"text": "右侧按钮",
			"width": "70px"
		}]
	}
}

h5生效

// 1.先获取到右上角的元素 第一个元素应该是左上角的元素
const rightButtonEle = document.getElementsByClassName('uni-page-head-ft')[1]
rightButtonEle.style.display = 'none';

app生效

let webView = this.$mp.page.$getAppWebview();  
webView.setTitleNViewButtonStyle(0,{  
	width: '0'  
});  
webView.setTitleNViewButtonStyle(1,{  
	width: '0'  
});

下拉刷新

"style": {
	"enablePullDownRefresh": true,// 开启页面下拉刷新
	"navigationBarTitleText": " 页面名称" // 页面名称
}

下拉刷新页面

data() {
	return {}
}onPullDownRefresh() {
	this.handleInit();
}
methods: {
	handleInit() {
	// api接口查询数据
	    fetchData().then(() => {
	    	// 处理数据
	    }).finally(() => {
	   	 	uni.stopPullDownRefresh()// 关闭下拉刷新的loading
	    })
	}
}
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
您可以使用uniapp的API来实现刷新当前tabbar页。首先,您需要在titleNView中添加一个按钮,并为其绑定一个点击事件。然后,在点击事件的处理函数中,可以使用uniapp的API来刷新当前tabbar页。 具体步骤如下: 1. 在titleNView中添加一个按钮,并为其绑定一个点击事件。例如,将按钮的点击事件命名为`refreshTabbarPage`。 ```html <view class="titleNView"> <view class="titleNView-title">页面标题</view> <view class="titleNView-buttons"> <button class="titleNView-button" @click="refreshTabbarPage">刷新</button> </view> </view> ``` 2. 在页面的methods中定义`refreshTabbarPage`方法,并在该方法中使用uniapp的API来刷新当前tabbar页。 ```javascript methods: { refreshTabbarPage() { // 获取当前页面的路由信息 const pages = getCurrentPages() const currentPage = pages[pages.length - 1] const currentRoute = currentPage.route // 使用uniapp的API来重新加载当前页面 uni.reLaunch({ url: '/' + currentRoute }) } } ``` 在上述代码中,我们首先通过`getCurrentPages`方法获取当前页面的路由信息,然后使用uniapp的`reLaunch`方法来重新加载当前页面。 请注意,`reLaunch`方法会关闭所有页面,并打开到应用内的某个页面,这里我们传入当前页面的路由信息,以实现刷新当前tabbar页的效果。 以上是一种实现方式,您可以根据自己的需求进行调整和修改。希望对您有帮助!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

人间清醒小仙女

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值