【小程序开发教程系列9】入门篇之小程序组件——视图容器

春哥技术团队虎子关于小程序开发教程继续更新中,上一篇文章讲解了“小程序组件 - 媒体组件”,本篇文章讲解“小程序组件 - 视图容器”。

小程序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,只要了解其标签使用方法及属性即可。

春哥团队独家打造的春哥小程序开发平台V1.1源码系统已经正式发布了,用此款源码系统可以分分钟搭建出强大的小程序开发平台,无需编程,小白也可以开发小程序,轻轻松松接单赚钱


 

来源:春哥技术博客,欢迎分享,(春哥微信号:cgnanyin)
上一篇:【小程序开发教程系列8】入门篇之小程      下一篇:如何用微信开发者工具新建小程序项目