如何使用小程序视图容器组件

发布时间:

2023-06-06

访问量:

0

上一篇文章中,我们介绍了小程序入门开发的基础步骤,并通过几个Hello Word例子,让大家体验了下小程序的组件及API使用,接下来的教程中,我们将教大家详细使用每个组件及API的使用。

在这篇教程中,我们将介绍小程序的视图容器组件以及小程序基础内容组件的使用。

视图容器组件

小程序的视图容器组件分为五个组件,分别为负责普通显示的view组件、负责可滚动视图区域scroll-viel组件,负责滑块视图容器swiper组件、可以触发移动的movable-area组件,已经可覆盖其他内容的cover-view组件。这篇文章中,我们将对这几个组件使用我们上一篇文章中创建的Hello World Demo进行演示及介绍。

为了教程演示方便,在开始之前,我们需要安装微信小程序官方分享的WeUI小程序视觉基础样式库,安装起来很简单,只需要点击这里下载weui.wxss小程序样式文件,然后将其复制到你小程序项目的lib文件夹即可,没有lib文件夹请自行创建。

之后,在你的页面wxss文件中引入weui.wxss就能直接使用这个样式库文件了。

Hello World - view

等上面文件准备就绪,我们就可以开始学习view组件的使用,首先,将原来项目中的index.wxssindex.wxml中的内容清除干净,同时删除index.js中的多余的函数,保留默认函数即可。接下来,将index.wxss中的文件替换为下面的内容。

然后,再打开index.wxml文件,填入下面的内容。

保存,你将看到类似下面的样式。

有前端开发经验的同学应该能看懂,这里的写法和css样式很像似,指定相关的class,就能够实现不同的排序及样式。我们可以尝试更改flex-direction:column的值将其改为flex-direction:column-reverse,看看会发生什么?

原来的1、2、3顺序变更为3、2、1了,参考css文档,column-reverse的效果与 column 相同,但是以相反的顺序。果然,view组件是支持原生css样式的。同时,小程序官方也提供了一些view组件特有的属性,我们看看下表的内容,在这里,我们可以体验下hover-class组件。

index.wxml文件中的第4行代码<view class="flex-item bc_green">1</view>改为<view class="flex-item bc_green" hover-class="flex-item bc_blue">1</view>,然后将鼠标移动到左上角黄色框内1的位置,点击看看会发生什么。

原来,这个view组件中的hover-class属性能够修改当前view的样式,当你点击这个view,将会显示你在hover-class中定义的属性。同时,我们也可以通过hover-start-timehover-stay-time设定按住显示时间和手松开后的保留时间。试试下面的代码吧~