实习日志06

设计一个天气预报的界面

如何设计页面

弹性布局：display：fixed->左右对齐

字符串裁切：.substr(从哪一个字符串开始切，切哪一位)

居中：display:flex;flex-direction:column;justify-content:flex-end;align-items:center;

说明：align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

提示：使用 justify-content 属性对齐主轴上的各项（水平）

flex-end

元素位于容器的结尾。

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

center

元素位于容器的中心。

flex-direction 属性规定灵活项目的方向。

column

灵活的项目将垂直显示，正如一个列一样。

左右居中：line-height=height;

做滚动界面效果

scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。

属性	类型	默认值	必填	说明
scroll-x	boolean	false	否	允许横向滚动
scroll-y	boolean	false	否	允许纵向滚动
upper-threshold	number/string	50	否	距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold	number/string	50	否	距底部/右边多远时，触发 scrolltolower 事件
scroll-top	number/string		否	设置竖向滚动条位置
scroll-left	number/string		否	设置横向滚动条位置
scroll-into-view	string		否	值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	boolean	false	否	在设置滚动条位置时使用动画过渡
enable-back-to-top	boolean	false	否	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper	eventhandle		否	滚动到顶部/左边时触发
bindscrolltolower	eventhandle		否	滚动到底部/右边时触发
bindscroll	eventhandle		否	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

Bug & Tip

1. tip: 基础库 2.4.0以下不支持嵌套textarea、map、canvas、video 组件
2. tip: scroll-into-view 的优先级高于 scroll-top
3. tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
4. tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

5. white-space: nowrap;做左右滑动效果

练习：天气预报页面