关于view的一些了解和uni-app组件的用法

1.uniapp项目中的view和常用视图容器组件

1.view的一些定义和用法

view 是我们常用的组件，其用法类似于我们的 div 标签

我们可以从官网上来了解view的更加详细的内容

官网链接:uni-app官网 (dcloud.net.cn)

找到在内置组件 — 视图容器下的 view 点开可以看到view的一些属性及其用法

在我们创建一个view时，只需打出view并按一下 Tab键 即可补全，如果要添加class时只需

先打出view在用 . 号打出我们的class类名再按一下Tab即可自动补全我们的标签和类名

在我们下面的style标签内引出我们的上面的class类名，然后对其进行赋予页面属性

打好了之后我们需要的属性之后就可以运行看我们的页面效果了，切记要保存

然后在view标签内部写一个hover-class也就是我们的鼠标点击事件

它和class是同级的，给它设置一个属性，比如背景颜色为background-color：orange橙色背景

保存好之后可以到页面看一下变化后的效果

在微信小程序等也是一样的效果

在我们松开鼠标后可以明显感受到变回之前效果的时候需要一些时间，这里就要用到我们之前在官网里的view中的属性 hover-stay-time 了

找到之后，在view标签内部设置，赋予等待时机为0时将松开鼠标后不会有间隙，等待时间单位为毫秒

当然也可以在hover-class类名设置一些其他属性，反正设置什么属性便会在页面上显示你设置的属性效果。

但你在一个设置了hover-class类名的view内部在次设置一个view组件时，给了一个class类名，并且在下面的style中给其设置一些属性

当你保存之后，在页面上也同时显示出来了修改你保存之后的页面内容

当你点击子元素是，会发现父元素也会变化，只不过不会覆盖子元素的效果

如果我们也给子元素设置一个Hover-class时

会发现父元素子元素都发生了改变

这个呢就是一个“冒泡”，因为子元素是被父元素所包裹的，所以发生了冒泡。

如果你只想让子元素发生改变父元素不变，则需要在子元素设置一个 hover-stop-propagation 属性,这个就是一个防止冒泡的属性，这样在页面中子元素和父元素就不会发生“冒泡”

如果是在小程序的话是会自动阻止的，具体的可以去看上面的uni-app官方的截图,会有详细说明,

不过在HH5已经更新了可以支持了

2.text的一些常用视图容器

如果我们想要在H5或者小程序复制文字的话，会发现无法直接复制，这个时候可以设置一个text组件，不管单纯的text无法直接复制，需要添加一些属性

当我们个text组件赋予的 selectable属性之后就可以长按复制文本了

保存之后运行

这个时候长按text的文本内容就可以清晰的看到我们的text组件里的内容可以被选中复制了

如果我们想要有多个空格可以在text组件设置一个space，设置好了之后就可以连续空格了

设置了space属性需要选择给其赋予一个值比如emsp是以中午模式空格

对于space是一定要设置值的，不然和没有使用没区别

关于space的值有一下几点

可以根据自己需要的空格类型来赋值。

2.scroll-view的介绍和使用

1.scroll-view的基本功能介绍

scroll-view是一个区域滚轮组件，在一个固定的区域内容，可以显示出更多的内容，也就是说会先显示一部分的数据，然后通过滚轮来查看到更多的数据，可以是自定义滚动方向，比如向下滚动显示或者向右滚动显示

可以先到uni-app官网里查看一些具体的知识

scroll-view经常可以在一些应用中看见，就比如当前人们经常看的抖音或者快手的评论区等，

就是用了一块区域来显示部分数据，通过滑动显示出更多的数据。

我们在项目中创建scroll-view时可以先打出scroll这个前半部分，直到右边快捷区域出现了一个uscrollview的选项跟着这个快捷区域的最下方按下快捷键

在我们打出了这个scroll-view之后，可以对这个标签添加一些属性，以便我们在页面中的效果，看起来更加清晰

保存，之后运行就可以看到我们的运行效果了

然后给其内部添加一些view组件

这scroll-y="true"是显示你的滚动条的，你可以去试试有与没有的区别

这个是有scroll-y这个属性的

这个是没有scroll-y这个属性的

scroll-y是向下滑动的，如果你需要左右滑动的话，则是比较麻烦一点的

首先给所以view组件添加一个class，让后改scroll-y为scroll-x，之后给view一些页面属性，并将其变成一行主要是方便我们左右滑动，还有要给scroll给一个属性：white-space: nowrap

这个是让其不要自动换行，否则每到边界则会换行，如果是在游览器记得则要将宽度调小一点

否则效果不明显，当然也可以给view组件加上一个margin属性就是上下左右添加一个间隔

如果想要了解更多的属性可以去uni-app官方去

链接：scroll-view | uni-app官网 (dcloud.net.cn)

这里有着非常多的属性根据你的需求去选择

3.swiper轮播器的基本用法

1.轮播器的基本认知

在我们经常使用的京东、淘宝、哔哩哔哩等的首页面可以看到都有着一个比较大的一块区域，轮流的播放一些图片之类的，这个就是我们的轮播器。

我们先创建一个新的项目，在新的项目里面来创建一个 swiper 标签也就是我们的最外层的容器，之后在标签里面创建一个子元素 swiper-item 

保存好了之后就可以去运行页面看效果了

只要拖动页面上显示的内容附加区域就可以了

如果所你没有跳转到当前页面，可以去pages.json文件里面查看你这个项目的地址，复制然后粘贴到地址栏，就可以了

然后你可以给这个swiper组件设置一些属性比如宽、高之类的设置宽的话可以用 vw 单位比如100vw就是这个页面的宽度，50vw就是一半的宽度，如果是高度的话可以用 vh 与vw类似都是100vh全部高度，50vh一半高度。当然也可以用像素px设置

保存后效果，以为左侧的边框线也占用了一些区域，所有右侧的边框线没有显示出来

随后给我们的swiper-item也设置一些属性，因为swiper-item是swiper的子元素所以宽高都直接继承父元素的100%

如果没有效果的话那可能是你没有给style设置 lang="scss"，设置好了就可以看的效果了

如果你想设置不一样的背景可以给swiper-item设置一个选择器

保存之后可以拖动轮播器来看到你的效果。

这个改变的背景颜色是你设置的颜色。

2.轮播器的指示点和自动滑动

在你去一些有轮播器的页面是会发现，他们下面都有一些显示的小点，会告诉你一共有多少个页面，和当前正处于那个页面，这个的话可以去官方看一下swiper的一些属性详情

我们在swiper里面添加 indicator-dots 属性就可以去页面看我们的效果了

那个指示点的颜色也可以自己设置，没有选中的指示点默认为灰色使用indicator-color 属性即可自己设置，选中的指示点为黑色也可以自己设置使用 indicator-active-color 属性即可

 当然也可以使用rgba设置不过比较复杂就比如rgba（255，255，255，0.3）就是白色

也可以使用#来设置比如：#ffffff 也是白色

当我们滑动到了最后一个页面时，会发现无法滑动了，这个时候需要我们设置 circular 属性了就是我们滑动到了最后一个页面时会自主滑动到第一个页面，加上之后就可以看到衔接滑动的效果了

如果要实现自动切换可以添加上autoplay，也可以设置自动切换的等待时间添加  interval

运行之后效果是2秒后切换一次就是正确的了。

也可以设置成纵向的需要使用 vertical 运行后发行是纵向自动滑动的就是成功了。

4.swiper的轮播和image的图像引用

1.image的一些基本认知与用法

先创建一个新的view组件，在里面创建一个image它会给你一个快捷键直接打出来，然后会出来两个属性一个src文件路径，另一个mode是图片显示模式

运行后会发现在我们的的页面上多出了一个图像，这个图像可能与它原本的大小有些不一样，因为对于这个图像进行了拉伸，可以右击游览器的检查找到这个图像进行查看，如果要设置可以起一个类名并在下方style标签内部进行属性的设置

保存后图像的宽高就成了你设置的大小

这个是右击进入检查后显示的页面，可以清晰的看的我设置的属性，不过要找的你的uni-image组件

如果我们需要添加图片进来可以选择拓展名为：png、jpg，webp等图片，然后选择我们要添加的图片，复制进入我的static文件夹里面，随后引入我们的图像

保存然后就可以看得到了

我们可以去吧沿用一个class属性也可以分开使用反正怎么方便怎么来

 

这个呢就是我们图片的页面显示结果

2.mode的基础信息和用法

这个时候如果我们图片的缩放想要自己来定义的话可以使用mode属性

在官网里会有关于mode属性的知识，比如所支持什么类型或者不支持什么类型

我们往下翻会发现mode的一些有效值及其说明

如果要显示原来的图片样式则需要在mode里面添加aspectFit值

先看一下添加前

添加之后

可以明显的看出我们的第一张图片发生了变化仍然是一样的区域却显示出了完整的图片

但是这样虽然显示了完整的图片却会有空白区域，这个时候只需要将aspectFit 改为 aspectFill即可这个是我们最常用的mode的值，效果是显示出最短的边然后占满你所个这个图片的区域

保存后运行

可以明显看到第一个图片的变化

 我们只想设置一个高度或者宽度时，但又想要让其变得比较正常的比例时，我们就可以用widthFix 这个是只设置宽度，高度的话可以使用heightFix 这个是只设置高度

保存后运行看页面效果

可以看到比例都是很正常的看起来不会那么难受。

在image里面不仅可以使用本地图片也可以使用网络图片只需要找到需要设置的网络图片，然复制链接到src里面即可，可以自己去尝试。

现在就可以将我们的图片替换到上面的轮播范围内了，将之前输入的文本内容替换的我们的image即可实现轮播替换图片，如果要替换的话建议将我们对于图片设置的class类名暂时去掉如果需要图片占满我们的swiper-item的话需要在scroll内部对image设置一些属性

有一些可能因为比例的问题显示不全，可以自己去设置一下。