(学习笔记)微信小程序 -- 组件->视图容器(view、sroll-view、swiper和swiper-item)

组件分为 9 类 , 视图容器基础内容表单组件导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、无障碍访问。

常见的视图容器组件

1) view -- 类似于HTML里的div

2)scroll-view -- 用来实现滚动列表效果

3)swiper 和 swiper-item -- 轮播图容器组件和轮播图item组件

view组件的使用:

先进行结构(wxml)布置,再进行样式(wxss)布置。

(学习笔记)微信小程序 -- 组件->视图容器(view、sroll-view、swiper和swiper-item)_第1张图片 (学习笔记)微信小程序 -- 组件->视图容器(view、sroll-view、swiper和swiper-item)_第2张图片

效果图:

                          (学习笔记)微信小程序 -- 组件->视图容器(view、sroll-view、swiper和swiper-item)_第3张图片

scroll-view组件的使用:

        常见属性:        

                                (学习笔记)微信小程序 -- 组件->视图容器(view、sroll-view、swiper和swiper-item)_第4张图片

         wxml布置和wxss样式:

                         (学习笔记)微信小程序 -- 组件->视图容器(view、sroll-view、swiper和swiper-item)_第5张图片

             (学习笔记)微信小程序 -- 组件->视图容器(view、sroll-view、swiper和swiper-item)_第6张图片

swiper和swiper-item组件的使用:

        常见属性:

                        (学习笔记)微信小程序 -- 组件->视图容器(view、sroll-view、swiper和swiper-item)_第7张图片

        结构、样式布置:

        (学习笔记)微信小程序 -- 组件->视图容器(view、sroll-view、swiper和swiper-item)_第8张图片

        (学习笔记)微信小程序 -- 组件->视图容器(view、sroll-view、swiper和swiper-item)_第9张图片

                           (学习笔记)微信小程序 -- 组件->视图容器(view、sroll-view、swiper和swiper-item)_第10张图片

        结果展示:

                             (学习笔记)微信小程序 -- 组件->视图容器(view、sroll-view、swiper和swiper-item)_第11张图片

        

 

 

 

        

                

你可能感兴趣的:(微信小程序,小程序)