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

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


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

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: