卓象程序员 | 哈尔滨IT培训 | 品质教育,口碑传承 | 为做出口口相传,好口碑的教育品牌而奋斗!

卓象程序员让每一位学员高薪就业 联系我们13101507057

加微信,了解详情
您所在的位置:首页 > 文章 >小程序连载

「小程序入门连载七」小程序组件—视图容器
时间: 2018-11-08 16:15:28     来源: 卓象IT实训基地【原创】

截止到上一篇文章,已经把小程序配置讲解完毕,接下来说明小程序组件 。


小程序MVC结构

「小程序入门连载七」小程序组件—视图容器


注意:在小程序页面中.wxml页面文件与.js文件是必须有的,.wxss与.json文件可有可无。


组件

框架为开发者提供了一系列基础组件,开发者通过组合这些基础组件进行快速开发。

什么是组件:

①组件是视图层的基本组成单元。

②组件自带一些功能与微信风格的样式。

③一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。

由于小程序升级很快,因此不讲全部的,了解常用的,剩下的自学即可。

组件手册:https://mp.weixin.qq.com/debug/wxadoc/dev/component/view.html


一、视图容器

1. view——视图容器

「小程序入门连载七」小程序组件—视图容器


view视图容器,相当于HTML的div标签。

1)view标签的使用

①新建页面test,并将test设为tabBar的一项,可在tab栏进行切换,进行view视图容器的测试

「小程序入门连载七」小程序组件—视图容器


「小程序入门连载七」小程序组件—视图容器


②修改test页面的.wxml文件,测试view视图容器

「小程序入门连载七」小程序组件—视图容器


③编译预览

「小程序入门连载七」小程序组件—视图容器


④在test.wxss中设置样式

「小程序入门连载七」小程序组件—视图容器


⑤编译预览

「小程序入门连载七」小程序组件—视图容器


尺寸单位

rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

「小程序入门连载七」小程序组件—视图容器


建议:开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。

注意:在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。

2)hover-class属性

指定按下去的样式类。当hover-class="none"时,没有点击态效果

①为view添加hover-class

「小程序入门连载七」小程序组件—视图容器


②设置后,为setColor添加样式

「小程序入门连载七」小程序组件—视图容器


③编译预览

「小程序入门连载七」小程序组件—视图容器


当点击view标签时,hover-class会给class属性添加一个值setColor,setColor的样式生效,当松开时,hover-class将class属性的setColor移除。其他属性自行了解。


2. swiper——滑块视图容器

滑块视图容器,简单来说类似幻灯片,但不止做幻灯片这一个功能,还有其他的作用。其中只可放置<swiper-item/>组件,否则会导致未定义的行为。

1)swiper-item

仅可放置在<swiper/>组件中,宽高自动设置为100%。

「小程序入门连载七」小程序组件—视图容器


①滑块视图容器的使用

「小程序入门连载七」小程序组件—视图容器


为了看清楚swiper的大小,可以添加样式。

②编译预览

「小程序入门连载七」小程序组件—视图容器


2)swiper属性——autoplay(是否自动切换)

swiper有很多的属性,就不一一说明,说明几个即可,其他自行了解。

「小程序入门连载七」小程序组件—视图容器


编译预览:

「小程序入门连载七」小程序组件—视图容器


3)swiper属性——indicator-dots、indicator-color、indicator-active-color

「小程序入门连载七」小程序组件—视图容器


①为滑块添加面板指示点,并设置颜色

「小程序入门连载七」小程序组件—视图容器


②编译预览

「小程序入门连载七」小程序组件—视图容器


注意:

1. 还有其他的视图容器,也有很多属性,自行了解即可。

2. 组件类似于html,只要了解其标签使用方法及属性即可。

「小程序入门连载七」小程序组件—视图容器


小程序组件开始

关注卓象程序员,定期发布技术文章

下一篇文章讲解“小程序组件——媒体组件”

「小程序入门连载七」小程序组件—视图容器