uniapp怎么去掉加载条

html-css024

uniapp怎么去掉加载条,第1张

1、首先打开uniapp软件。

2、其次在app.vue的页面中设置全局css样式属性。

3、最后在page.json设置默认属性,代码为"scrollIndicator":"none"就可以去掉加载条了。

进度条效果做为网站常用模块无论是投资理财类、还是众筹类、加载提示类网站已经比较常见。另外,HTML5新增了 progress 标签,其重要程度可见一斑。

由于HTML的 progress 存在兼容性问题,本文主要讲解如何通过CSS实现一个简单的自定义进度条效果!

前端开发常用的进度条效果如下:

(环形进度条下次再讲!)

这两个算是比较有代表性的,一个的均匀的一个的不均匀的,实现起来略有不用。

以第一个为例:

这种比较简单,只需要两个 div 标签就可以了(一个标签也可以实现,后文会讲到)

原理介绍:

外层 div 用来显示进度条总长度以及背景色;内层div用来显示当前进度条进度,和当前进度条颜色。

结构如下:

样式如下:

此时效果如下:

只需要利用 js 动态控制上层 div 的宽度就可以实现最简单的自定义进度条了.

** 第二种带原点的进度条 **

此时实现原理跟第一种类似,只是背景色替换成了背景图片,图片如下:

这两个图片除了颜色不一样以外其他是一样大小的!

如果上面的能理解我想这个就不难理解了吧,不过为了显得文章完整还是简单做一个demo如下:

效果如下: