uni-app 的常用组件与视图容器及常用的属性

1.基础视图容器组件

在uni-app中它的组件和HTML不太一样比如常用的HTML中的<div>在uni-app中是<view>,这在官网上都是有介绍的

以及在写时template标签是很重要的,

在<view>中的文字是无法选择上的所以有一个标签<text>的是可以被选择上的需要加属性selectable值="true"时才可以被选择,然后呢一般情况下在这些标签打空格只会有一个,就要空space,才可按你输入了几个而去展示几个空格

以上是最基础的uni-app的组件

2.view组件的扩展

1.首先是 scroll-view 它是一个可以空着区块中上下滑轮和左右的,经常使用的有这两个

其它的可以去看看官网组件中的试图容器;

2.1.1上下滑动

通过<scroll-view>标签中的scroll-y就可以实现滚轮上下滑动的功能;

2.1.2左右滑动

如果说像图片那种的话需要将scroll-y该成scroll-x 并且为<scroll-view>添加属性:为它的子元素添加属性 display: inline-block;设置为平行到一条  在设置它自己属性 white-space: nowrap;不自动换行

2.2.1 swiper滑块视图容器

只需要编写<swiper>标签在里面添加<swiper-item>标签他就可以实现最简单的轮播效果

2.2.2 指数点

它只需要在<swiper>标签中添加 indicator-dots 属性去实现,点击指数点可以切换

2.2.3 指数点默认颜色调节

该属性设置后 indicator-color="颜色",则会默认的颜色会显示为你选择的颜色

2.2.4 指数点选择的颜色调节

该属性设置后 indicator-active-color="颜色",则选择指数的颜色会显示为你选择的颜色

2.2.5 指数点衔接滑动

设置属性 circular 则可衔接滑动图片,就是滑到最后一个会回到第一个

2.2.6 自动播放与设置切换时间

 autoplay设置该属性为设置自动切换,默认为5000毫秒也就是5秒,所以我们需要设置它的切换时间,我们就用到了interval来设置切换时间;        

2.2.7 滑动方向

滑动方向默认是横向的,通过设置 vertical 属性 可设置为纵向的滑动