uniapp学习API之—界面之宽屏适配、字体、下拉刷新

news/2025/3/14 1:00:38/

#窗口样式相关的 API

uni.getTopWindowStyle()

获取 topWindow 的样式

uni.getLeftWindowStyle()

获取 leftWindow 的样式

uni.getRightWindowStyle()

获取 rightWindow 的样式

uni.setTopWindowStyle(OBJECT)

设置 topWindow 的样式   ,参数说明

css 样式对象,需写驼峰css属性 ,{height: '100px', backgroundColor: 'red'}

uni.setLeftWindowStyle(OBJECT)

设置 leftWindow 的样式

uni.setRightWindowStyle(OBJECT)

设置 rightWindow 的样式

字体

uni.loadFontFace(Object object)

动态加载网络字体,文件地址需为下载类型。微信小程序 '2.10.0'起支持全局生效,需在 app.vue 中调用。

uni.loadFontFace({family: 'Bitstream Vera Serif Bold',source: 'url("https://sungd.github.io/Pacifico.ttf")',success() {console.log('success')}
})

uni.upx2px()

将rpx单位值转换成px

下拉刷新

onPullDownRefresh                   -97

在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。

  • 需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh
  • 当处理完数据刷新后,uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

 uni.startPullDownRefresh(OBJECT)        -3

主动下拉刷新

开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。

uni.stopPullDownRefresh()        -104

停止当前页面下拉刷新。

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","enablePullDownRefresh": true}}],"globalStyle": {"navigationBarTextStyle": "white","navigationBarBackgroundColor": "#0faeff","backgroundColor": "#fbf9fe"}
}
// 仅做示例,实际开发中延时根据需求来使用。
export default {data() {return {text: 'uni-app'}},onLoad: function (options) {setTimeout(function () {console.log('start pulldown');}, 1000);uni.startPullDownRefresh();},onPullDownRefresh() {console.log('refresh');setTimeout(function () {uni.stopPullDownRefresh();}, 1000);}
}

http://www.ppmy.cn/news/384996.html

相关文章

宽屏自适应php源码,jQuery+H5自适应通栏宽屏banner幻灯片切换特效

jQueryH5自适应通栏宽屏banner幻灯片切换特效 代码片段: function(){ $(this).find(".prev,.next").fadeOut() }); $(".fullSlide").slide({ titCell: ".hd ul", mainCell: ".bd ul", effect: "fold", autoPlay:…

图文详解uni-app PC端宽屏适配方案

图文详解uni-app PC端宽屏适配方案 随着互联网的发展,iOS、Android、H5以及各种小程序快应用层出不穷,随之而来的问题就是如何用一套代码,适配多个平台,其中uni-app表现优异,已经实现了手机端全覆盖,支持i…

宽屏文章列表 html,HTML5宽屏简洁文章资讯博客织梦模板

★模板介绍★ HTML5宽屏简洁文章资讯博客织梦CMS整站SEO模板,测试完整无错,兼容主流浏览器。 模板包含安装说明,并包含测试数据。 本模板基于DEDECms 5.7 UTF-8设计,需要GBK版本的请自己转换或使用在线转换工具转换。 如果您购买后…

宽屏图片轮播html,jQuery实现宽屏图片轮播实例教程

本文实例讲述了jQuery实现宽屏图片轮播实例教程。分享给大家供大家参考。具体如下: 运行效果截图如下: 引入jquery库 构建html 整个代码分为三部分: 1、加载部分loadding ; 2、图片部分,这里图片只能是4张,…

软件测试工程师如何推进项目进度?

在软件研发中,有一种思想叫TDD,即测试驱动开发,TDD是敏捷方法中的一项核心实践,其原理是在开发功能代码之前,先编写单元测试用例代码,对要编写的函数或类明确测试方法后,再进行设计与编码。 本…

面向制造业的IT管理

制造业的数字化和工业4.0技术的应用,使制造商能够优化生产,转变价值链,创造卓越的客户体验。随着行业采用新的技术,如人工智能(AI)、工业物联网(IIOT)和其他策略,制造商需要找到有效的方法来监控和管理他们的生产环境、…

MongoDB 索引操作引起的 Crash

摘要:本文详细阐述了根据引起 Crash 操作进行从配置到源码的分析过程,层层递进,定位复现并给出解决故障方案。 作者:徐耀荣 爱可生南区交付服务部 DBA 团队成员,主要负责 MySQL 故障处理以及相关技术支持。爱好电影&am…

设计模式相关内容介绍

文章目录 1、软件设计模式的背景2、软件设计模式的概念3、学习设计模式的必要性4、设计模式分类 1、软件设计模式的背景 "设计模式"最初并不是出现在软件设计中,而是被用于建筑领域的设计中。1977年美国著名建筑大师、加福尼亚大学伯克分校环境结构中心主…