组件案例

1.小程序常用的组件:

1.view 组件
2.swiper和swiper-item 组件
3.image 组件
4.text 组件
5.navigator 组件
6.scroll-view 组件
7.字体图标
  使用小程序常用的组件实现项目首页的效果

2.组件案例-轮播图区域绘制

1.在进行网页开发的时候，实现轮播图的时候，我们通常先使用 HTML，CSS 实现轮播图的结构样式，然后使用 JS 控制轮播图的效果，或者直接使用插件实现轮播图的功能，而在小程序中实现小程序功能则相对简单很多。
2.在小程序中，提供了 swiper 和 swiper-item 组件实现轮播图:
3.swiper:滑块视图容器，其中只能放置swiper-item 组件
4.swiper-item:只可放置在 swiper 组件中，宽高自动设置为100%，代表swiper 中的每一项

3.组件案例-轮播图图片添加

在小程序中，如果需要渲染图片，需要使用image 组件，常用的属性有4个:
    1.src 属性:图片资源地址
    2.mode:图片裁剪、缩放的模式
    3.show-menu-by-longpress:长按图片显示菜单，菜单中有转发给好友、收藏、保存等功能
    4.lazy-load:图片懒加载，在滑动到一定的距离(上下三屏)以后展示图片 
注意事项:
    1.image 默认具有宽度和高度，宽是 320px高度是 240pX
    2.image 组件不给 src 属性设置图片地址，也占据宽和高

4.组件案例-绘制公司信息区域

在小程序中，如果需要渲染文本，需要使用 text 组件，常用的属性有2个:
    1.user-select:文本是否可选，用于长按选择文本
    2.space:显示连续空格
注意事项:
    1.除了文本节点以外的其他节点都无法长按选中
    2.text 组件内只支持 text 嵌套

5.组件案例-跳转到商品列表

在小程序中，如果需要进行跳转，需要使用 navigation 组件，常用的属性有2个:
    1.url:当前小程序内的跳转链接
    2.open-type:跳转方式
        1.navigate:保留当前页面，只能跳转到非 TabBar页面，不能跳转到 TabBar 页面，保留上一级页面
        2.redirect:关闭当前页面，只能跳转到非 TabBar 页面，不能跳转到 TabBar 页面，关闭上一级页面
        3.switchTab:只能跳转到 TabBar 页面，不能跳转到非 TabBar 页面，关闭其他所有的非 TabBar 页面
        4.reLaunch:关闭所有页面，然后打开小程序中某一个页面
        5.navigateBack:返回上一页或者返回前几页，默认只能返回上一页
            delta:返回的层级，默认是 1，如果想返回几级，就写几
注意事项:
    1.路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔
    例如:/list?id=10&name=hua，在 onLoad(options)生命周期函数 中获取传递的参数
    2.open-type=“switchTab" 时不支持传参

6.组件案例-推荐商品区域

1.微信想小程序中如果想实现内容滚动，需要使用 scroll-view 组件
2.scroll-view:可滚动视图区域，适用于需要滚动展示内容的场景，用于在小程序中实现类似于网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容
3.先来学习两个属性:
    1.scroll-x:允许横向滚动
    2:scroll-y:允许纵向滚动

7.组件案例-字体图标的使用

在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。
小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。

8.背景图的使用

当编写小程序的样式文件时，我们可以使用 background-image 属性来设置元素的背景图像
注意事项:
    小程序的 background-image 不支持本地路径!需要使用网络图片，或者 base64，或者使用 <image/>组件