找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索本站精品资源

搜索

首页 › 教程频道› 小程序开发 › 查看内容

小程序极速实战开发《一》view视图容器

作者：模板之家 2018-1-25 16:40 8616人关注

组件说明: 视图容器 没有固定结构，比较随意，可以包裹其他组件，也可以放到一些组件的内部，类似HTML中的 DIV 组件用法： wxml viewclass=btnGroup view class=item orange 退格/view view class=item

组件说明:
  • 视图容器
  • 没有固定结构，比较随意，可以包裹其他组件，也可以放到一些组件的内部，类似HTML中的 DIV

组件用法：
 
wxml
 
  1. <view  class="btnGroup">
  2.         <view class="item orange" >退格</view>
  3.         <view class="item orange" >清屏</view>
  4.         <view class="item orange" >+/-</view>
  5.         <view class="item orange" >+</view>
  6.       </view>
  7.       <view  class="btnGroup">
  8.         <view class="item blue" >9</view>
  9.         <view class="item blue" >8</view>
  10.         <view class="item blue" >7</view>
  11.         <view class="item orange" >-</view>
  12.       </view>
  13.       <view  class="btnGroup">
  14.         <view class="item blue" >6</view>
  15.         <view class="item blue" >5</view>
  16.         <view class="item blue" >4</view>
  17.         <view class="item orange" >×</view>
  18.       </view>
  19.       <view  class="btnGroup">
  20.         <view class="item blue" >3</view>
  21.         <view class="item blue" >2</view>
  22.         <view class="item blue" >1</view>
  23.         <view class="item orange" >÷</view>
  24.       </view>
  25.       <view  class="btnGroup">
  26.         <view class="item blue" >0</view>
  27.         <view class="item blue" >.</view>
  28.         <view class="item blue" >历史</view>
  29.         <view class="item orange" >=</view>
  30.       </view>
 
css
 
  1. .btnGroup{
  2.     display:flex;
  3.     flex-direction:row;
  4. }
  5. .orange{
  6.     color: #fef4e9;
  7.     border: solid 1px #da7c0c;
  8.     background: #f78d1d;
  9. }
  10. .blue{
  11.     color: #d9eef7;
  12.     border: solid 1px #0076a3;
  13.     background: #0095cd;
  14. }
 
flex-direction: row：
 
 
wxml
 
  1. <view class="flex-wrp">
  2.     <view class="flex-item red" ></view>
  3.     <view class="flex-item green" ></view>
  4.     <view class="flex-item blue" ></view>
  5. </view>
 
wxss
 
  1. .flex-wrp{
  2.     height: 100px;
  3.     display:flex;
  4.     background-color: #FFFFFF;
  5. }
  6. .flex-item{
  7.     width: 100px;
  8.     height: 100px;
  9. }
  10. .red{
  11.     background: red;
  12. }
  13. .green{
  14.     background: green;
  15. }
  16. .blue{
  17.     background: blue;
  18. }
 
flex-direction: column：
 
 
wxml
 
  1. <view class="flex-wrp column">
  2.     <view class="flex-item" style="background: red"></view>
  3.     <view class="flex-item" style="background: green"></view>
  4.     <view class="flex-item" style="background: blue"></view>
  5. </view>
 
wxss
 
  1. .column{
  2.    flex-direction:column;
  3. }
  4. .flex-item{
  5.     width: 100px;
  6.     height: 100px;
  7. }
  8. .flex-wrp{
  9.     height: 100px;
  10.     display:flex;
  11.     background-color: #FFFFFF;
  12. }
  13. .red{
  14.     background: red;
  15. }
  16. .green{
  17.     background: green;
  18. }
  19. .blue{
  20.     background: blue;
  21. }
 
justify-content: flex-start：
 
wxml
 
  1. <view class="flex-wrp flex-start">
  2.     <view class="flex-item" style="background: red"></view>
  3.     <view class="flex-item" style="background: green"></view>
  4.     <view class="flex-item" style="background: blue"></view>
  5. </view>
 
wxss
 
  1. .flex-start{
  2.     flex-direction:row;
  3.     justify-content: flex-start;
  4. }
  5. .flex-wrp{
  6.     height: 100px;
  7.     display:flex;
  8.     background-color: #FFFFFF;
  9. }
  10. .flex-item{
  11.     width: 100px;
  12.     height: 100px;
  13. }
  14. .red{
  15.     background: red;
  16. }
  17. .green{
  18.     background: green;
  19. }
  20. .blue{
  21.     background: blue;
  22. }
justify-content: flex-end
 
 
 
wxml
 
  1. <view class="flex-wrp flex-end">
  2.     <view class="flex-item" style="background: red"></view>
  3.     <view class="flex-item" style="background: green"></view>
  4.     <view class="flex-item" style="background: blue"></view>
  5. </view>
 
wxss
 
  1. .flex-end{
  2.     flex-direction:row;
  3.     justify-content: flex-end;
  4. }
  5. .flex-wrp{
  6.     height: 100px;
  7.     display:flex;
  8.     background-color: #FFFFFF;
  9. }
  10. .flex-item{
  11.     width: 100px;
  12.     height: 100px;
  13. }
  14. .red{
  15.     background: red;
  16. }
  17. .green{
  18.     background: green;
  19. }
  20. .blue{
  21.     background: blue;
  22. }
 
justify-content: center
 
 
wxml
 
  1. <view class="flex-wrp justify-content-center">
  2.     <view class="flex-item" style="background: red"></view>
  3.     <view class="flex-item" style="background: green"></view>
  4.     <view class="flex-item" style="background: blue"></view>
  5. </view>
 
wxss
 
  1. .justify-content-center{
  2.     flex-direction:row;
  3.     justify-content: center;
  4. }
  5. .flex-wrp{
  6.     height: 100px;
  7.     display:flex;
  8.     background-color: #FFFFFF;
  9. }
  10. .flex-item{
  11.     width: 100px;
  12.     height: 100px;
  13. }
  14. .red{
  15.     background: red;
  16. }
  17. .green{
  18.     background: green;
  19. }
  20. .blue{
  21.     background: blue;
  22. }
 
justify-content: space-between
 
 
wxml
 
  1. <view class="flex-wrp space-between">
  2.   <view class="flex-item" style="background: red"></view>
  3.   <view class="flex-item" style="background: green"></view>
  4.   <view class="flex-item" style="background: blue"></view>
  5. </view>
 
wxss
 
  1. .space-between{
  2.   flex-direction:row;
  3.   justify-content: space-between;
  4. }
  5. .flex-wrp{
  6.   height: 100px;
  7.   display:flex;
  8.   background-color: #FFFFFF;
  9. }
  10. .flex-item{
  11.   width: 100px;
  12.   height: 100px;
  13. }
  14. .red{
  15.   background: red;
  16. }
  17. .green{
  18.   background: green;
  19. }
  20. .blue{
  21.   background: blue;
  22. }
 
justify-content: space-around
 
 
wxml
 
  1. <view class="flex-wrp space-around">
  2.     <view class="flex-item" style="background: red"></view>
  3.     <view class="flex-item" style="background: green"></view>
  4.     <view class="flex-item" style="background: blue"></view>
  5. </view>
 

wxss
 
  1. .space-around{
  2.     flex-direction:row;
  3.     justify-content: space-around;
  4. }
  5. .flex-wrp{
  6.     height: 100px;
  7.     display:flex;
  8.     background-color: #FFFFFF;
  9. }
  10. .flex-item{
  11.     width: 100px;
  12.     height: 100px;
  13. }
  14. .red{
  15.     background: red;
  16. }
  17. .green{
  18.     background: green;
  19. }
  20. .blue{
  21.     background: blue;
  22. }

align-items: flex-end


wxml

  1. <view class="flex-wrp align-items-flex-end">
  2.     <view class="flex-item" style="background: red"></view>
  3.     <view class="flex-item" style="background: green"></view>
  4.     <view class="flex-item" style="background: blue"></view>
  5. </view>

wxss

  1. .align-items-flex-end{
  2.     height: 200px;
  3.     flex-direction:row;
  4.     justify-content: center;
  5.     align-items: flex-end;
  6. }
  7. .flex-wrp{
  8.     height: 100px;
  9.     display:flex;
  10.     background-color: #FFFFFF;
  11. }
  12. .flex-item{
  13.     width: 100px;
  14.     height: 100px;
  15. }
  16. .red{
  17.     background: red;
  18. }
  19. .green{
  20.     background: green;
  21. }
  22. .blue{
  23.     background: blue;
  24. }

align-items: center


wxml

  1. <view class="flex-wrp align-items-center">
  2.     <view class="flex-item" style="background: red"></view>
  3.     <view class="flex-item" style="background: green"></view>
  4.     <view class="flex-item" style="background: blue"></view>
  5. </view>

wxss

  1. .align-items-center{
  2.     height: 200px;
  3.     flex-direction:row;
  4.     justify-content: center;
  5.     align-items: center;
  6. }
  7. .flex-wrp{
  8.     height: 100px;
  9.     display:flex;
  10.     background-color: #FFFFFF;
  11. }
  12. .flex-item{
  13.     width: 100px;
  14.     height: 100px;
  15. }
  16. .red{
  17.     background: red;
  18. }
  19. .green{
  20.     background: green;
  21. }
  22. .blue{
  23.     background: blue;
  24. }

align-items: flex-start


wxml

  1. <view class="flex-wrp align-items-flex-start">
  2.     <view class="flex-item" style="background: red"></view>
  3.     <view class="flex-item" style="background: green"></view>
  4.     <view class="flex-item" style="background: blue"></view>
  5. </view>

wxss

  1. .align-items-flex-start{
  2.     height: 200px;
  3.     flex-direction:row;
  4.     justify-content: center;
  5.     align-items: flex-start;
  6. }
  7. .flex-wrp{
  8.     height: 100px;
  9.     display:flex;
  10.     background-color: #FFFFFF;
  11. }
  12. .flex-item{
  13.     width: 100px;
  14.     height: 100px;
  15. }
  16. .red{
  17.     background: red;
  18. }
  19. .green{
  20.     background: green;
  21. }
  22. .blue{
  23.     background: blue;
  24. }

主要属性：
排列方式（flex-direction），用于wxss

属性
描述
row
横向排列
column
纵向排列

弹性项目内容对齐（justify-content），用于wxss

属性
描述
flex-start
弹性项目向行头紧挨着填充
flex-end
弹性项目向行尾紧挨着填充
center
弹性项目居中紧挨着填充
space-between
弹性项目平均分布在该行上
space-around
弹性项目平均分布在该行上，两边留有一半的间隔空间

项目在容器内侧轴方位的对齐方式（align-items），用于wxss

属性
描述
stretch
默认值，弹性项目被拉伸以适应容器
center
弹性项目位于容器的中心
flex-start
弹性项目位于容器的开头
flex-end
弹性项目位于容器的结尾
baseline
弹性项目位于容器的基线上


路过
雷人
握手
鲜花
鸡蛋
原作者: 模板之家 来自: 网络收集
上一篇：【四：录音功能】微信小程序（全部代码）开发跑步App+音乐播放器
下一篇：小程序极速实战开发《二》scroll-view可滚动视图区域

全部回复(0)

Copyright © Comsenz Inc. Powered by Discuz!X3.5 蜀ICP备12013697号
微信：xu08290201 QQ：75283535