微信小程序学习(6)-视图容器

1. View

flex-direction:row:横向布局模式；如果不设置该属性，默认为横向

flex-direction:column:纵向布局。



界面样式代码

注意：1.如果想要改模式有效，父控件必须设置显示方式为flex模式，display:flex;

           2.要想控件的背景颜色显示出来，必须view设置大小，否则background-color属性无效。

2.scroll-view

<view class="section">
<view class="section__title">vertical scroll</view>
<!--如果是垂直滚动，必须设置scrollview的高度，切记-->
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red"  class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>

<view class="btn-area">
<button size="mini" bindtap="tap">click me to scroll into view </button>
<button size="mini" bindtap="tapMove">click me to scroll</button>
</view>
</view>
<view class="section section_gap">
<view class="section__title">horizontal scroll</view>
<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
<view id="green" class="scroll-view-item_H bc_green"></view>
<view id="red"  class="scroll-view-item_H bc_red"></view>
<view id="yellow" class="scroll-view-item_H bc_yellow"></view>
<view id="blue" class="scroll-view-item_H bc_blue"></view>
</scroll-view>
</view>

界面渲染代码：

.section {
display: flex;
flex-direction: column;
}
/*设置垂直滚动每个滑动块高度*/
.scroll-view-item {
height: 100px;
}
/*设置中间两个按钮的位置*/
.btn-area {
height: 80px;
justify-content: space-around;
display: flex;
flex-direction: column;
}
/*设置水平滚动视图，该属性必须设置为nowrap，表示超出范围也不换行
white-white-space属性的值
normal: 自动换行(默认.内容超过父控件宽度换行)
pre: 保持HTML源代码的空格与换行,等同与pre标签，识别空格和换行符
nowrap: 不换行,超出范围的隐藏
pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行
pre-line: 同pre属性,但是遇到连续空格会被看作一个空格
inherit: 继承
*/
.scroll-view_H {
white-space: nowrap;
}
/*设置水平滚动的所有元素的大小,view默认为块元素，会自动换行，所以必须设置为行内元素*/
.scroll-view-item_H {
width: 150px;
height: 100px;
display: inline-block;
}
/*设置每个View的背景颜色*/
.bc_green {
background-color: green;
}
.bc_red {
background-color: red;
}
.bc_blue {
background-color: blue;
}
.bc_yellow {
background-color: yellow;
}页面交互代码：
//logs.js
var util = require('../../utils/util.js')
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
data: {
//元素的IDID，通过修改这个，实现点击把这个元素滚动到顶部
toView: 'red',
//默认你已经滚动的距离
scrollTop: 100
},
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
},
//点击改变要滚动到顶部的元素ID
tap: function(e) {
for (var i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
//动态刷新数据，向上滚动一页
this.setData({
toView: order[i + 1]
})
break
}
}
},
//点击一次滚动10
tapMove: function(e) {
this.setData({
scrollTop: this.data.scrollTop + 10
})
}
})

3.swiper 主要用于图片轮播，广告banner的展示

界面渲染代码：

.btn {
display: flex;
flex-direction: column;
height: 400px;
justify-content: space-around;
text-align: center;
}