微信小程序 UI与容器组件总结

发布时间：2020-12-14 20:20:31 所属栏目：资源来源：网络整理

导读：微信小程序 UI与容器组件总结 1.总结与概述 2.容器组件 2.1 组件容器（view） 2.2可滚动视图容器(scroll-view) 2.3 滑块视图容器（swiper） 1.总结与概述 1.1 UI组件总结图 1.2 概述小程序的UI组件也就是定义用户界面的一系列标签，类似于html标签。一个完

微信小程序 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

2.2 可滚动视图容器(scroll-view)

(1) 总结

(2) 例子

效果图：

page.wxml

水平滚动布局垂直滚动布局

page.wxss

}
.x_blue{
background-color: blue;
width: 500rpx;
height: 300rpx;
display: inline-flex;
}
.x_yellow{
background-color: yellow;
width: 500rpx;
height: 300rpx;
display: inline-flex;
}
.y_green{
background-color: green;
width: 100%;
height: 300rpx;
}
.y_red{
background-color: red;
width: 100%;
height: 300rpx;
}
.y_yellow{
background-color: yellow;
width: 100%;
height: 300rpx;
}
.y_blue{
background-color: blue;
width: 100%;
height: 300rpx;
}
.scroll-view-x{
display: flex;
white-space: nowrap;
width: 100%;
margin-bottom: 20px;
margin-top: 10px;
height: 300rpx;
}
.scroll-view-y{
height: 400rpx;
}
/重要属性：
white-space: nowrap;//设置内部元素不换行显示，与display: inline-flex;属性联合使用才会有水平布局的效果
/

page.js

2.3 滑块视图容器（swiper）

(1)总结

(2)例子

效果图：

page.wxml

page.js

console.log(e.detail)
}
})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!