前端之家收集整理的这篇文章主要介绍了
微信小程序 UI与容器组件总结，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
1.总结与概述
2.容器组件
2.1 组件容器（view）
2.2可滚动视图容器(scroll-view)
2.3 滑块视图容器（swiper）
1.总结与概述
1.1 UI组件总结图
1.2 概述
小程序的UI组件也就是定义用户界面的一系列标签，类似于html标签。一个完整用户响应过程：事件触发——>UI组件接收到事件——>触发js函数响应事件——>更新UI
2.容器组件
2.1 容器组件(view)
(1)总结
(2)例子
效果图
page.wxml
red
page.wxss
属性：
display: flex; //与display：
Box;是类似，是flex
Box的最新语法格式，有更好的适配
效果
flex-direction: column; //表示子布局垂直布局
flex-direction: row; //表示子布局为水平布局
*/
2.2 可滚动视图容器(scroll-view)
(1) 总结
(2) 例子
效果图：
page.wxml
<div class="jb51code">
<pre class="brush:js;">
水平滚动布局
垂直滚动布局
获取应用实例
var app = getApp()
//var color_index=['green','red','yellow','blue'];
Page({
data:{
toview:'red',},/*滑动到左边触发*/
scrollXToUpper:function(){
console.log('scrollXToUpper')
},/*滑动到右边触发 */
scrollXToLower:function(){
console.log('scrollXToLower')
},/*滑动到顶部触发*/
scrollYToUpper:function(){
console.log('scrollYToUpper')
},/*滑动到左边触发 */
scrollYToLower:function(){
console.log('scrollYToLower')
},/*滑动触发 */
scroll:function(){
console.log("scroll")
},onLoad: function () {
console.log('onLoad')
var that = this
},})
