标签：没有 自身 导航栏 border 事件 safe 哪些 控制 top
(1) 设置控件居中，需要设置父控件的css样式
view {
display: flex;/*flex弹性布局*/
align-items: center;/*item在交叉轴上的对齐方式*/
justify-content: center;/*item在主轴上的对齐方式*/
}
(2) #scroller：scroll-view，整个scroll-view
scroll-y：y方向滚动；throttle：不清楚，查了文档scroll-view没有这个属性；data-status-bar-height：将数据绑定到组件，事件触发时，在target的dataset对象中可以获取到转换后的属性statusBarHeight；(3) .nav：view，导航栏区域；通过style行内样式设置padding-top，不推荐使用行内样式；
.nav样式：.nav {
position: fixed;/*fixed相对于浏览器窗口定位；absolute相对于有position属性的父元素定位；relative相对于自身的原始位置定位*/
top: 0;
width: 100%;
background-color: #000;
height: 44px;
padding-top: env(safe-area-inset-top);/*获取上边框安全距离，适配iphoneX全面屏*/
z-index: 1;/*设置元素的堆叠顺序，数字大的在上面，可以为负值，必须是设置了position属性的元素*/
}
userNickName获取用户昵称；userAvatarUrl获取用户头像；userProvince获取用户省份；userCity获取用户城市；.search_bar搜索框: style行内样式设置top属性；因为.search_bar的position属性值为absolute，相对于有position属性的父元素定位，即为相对于.nav进行定位，距离它的顶部20px。.search_input，输入框的样式：.search_input {
text-align: left;
display: inline-block;/*行内块级元素*/
width: 10%;/*宽度为父元素宽度的10%*/
background-color: #F3F3F3;
color: #888;
height: 25px;
line-height: 25px;
font-size: 12px;
border-radius: 3px;/*圆角*/
overflow: hidden;/*超过部分隐藏*/
}
.search_input text：text，输入框中的文本样式：.search_input text {
padding-left: 20px;/*内左边距，预留icon位置*/
line-height: 25px;
display: inline-block;
height: 25px;
}
.search_bar icon: icon，微信提供的一些默认图标(4) .info内容区域
.info的样式：.info {
margin-top: env(safe-area-inset-top);/*外上边距，预留状态栏高度*/
padding-top: 44px;/*内上边距，预留nav高度*/
/* display: flex; */
background-color: white;
}
.avatar头像，行内样式top: {{((statusBarHeight + 44) - 80) - 5}}px，设置top为-21px和sticky一起使用当头像位置超过父元素（此处为scroll-view）21px之后固定；css文件中的样式为：.avatar {
/* display: inline-block; */
display: flex;
border-radius: 100%;
border: 2px solid #FAFAFA;
height: 100px;
width: 100px;
overflow: hidden;
/* position: absolute; */
left: 20px;
/* top: 10px; */
will-change: transform;/*提前告知浏览器该元素要进行transform动画，避免开始动画时闪屏*/
/* transition: transform .03s linear; */
z-index: 2;/*在导航栏图层上面*/
/* contain: strict; */
position: sticky;/*粘性定位，主要用在scroll-view中，相对于最近的scroll-box类型（含有滚动条或者设置了overflow属性）的父元素进行定位，当超过了设置的top/right/bottom/left的值时会固定*/
/* top: -20px; */
transform: translateY(-20px);/*通过transform属性对元素进行旋转，缩放，倾斜，平移等操作，顺序为rotate, scale, skew, translate*/
transform-origin: left 75%;/*元素transform动画的原点，相对于元素左上角的距离，默认为自身中心点*/
}
.intro简介，bindtap绑定点击事件.scroller2: scroll-view，页面中间的scroll-view；scroll-x设置滚动方向为横向滚动；bindscroll绑定滚动事件；bindtouchend绑定触摸结束事件；scroll-with-animation设置滚动条位置时是否使用动画；scroll-left设置横向滚动条的位置；menu_wrap，scroll-view下的子控件，设置足够的宽度来显示内容；样式为：.menu_wrap {
white-space: nowrap;/*所有内容显示在一行，不换行*/
padding: 9px 0;
position: relative;
}
.menu_item_more查看更多按钮，通过滚动动画控制是否显示；(5) js内容
scrollLeft和scrollTop属性，该元素显示内容与实际内容的距离，或者说向左或向上滚动的距离scrollWidth和scrollHeight属性，该元素内容的实际宽度和高度deltaX和deltaY属性，向右和向上滚动时返回正值，向左和向下滚动时返回负值createSelectorQuery()创建选择器，用于选取指定元素select()指定选择器，选取第一个匹配到的元素fields(Object, Function)获取节点信息，Object中指定需要返回哪些节点信息，Function回调方法，里面有需要的节点信息this.animate(selector, keyframes, duration, callback)关键帧动画this.animate(selector, keyframes, duration, ScrollTimeline)滚动驱动的动画，示例：//this.animate(selector, keyframes, duration, ScrollTimeline)滚动驱动的动画
this.animate(‘.avatar‘, [{
borderRadius: ‘0‘,
borderColor: ‘red‘,
transform: ‘scale(1) translateY(-25px)‘,
offset: 0,//offset关键帧的偏移，范围【0，1】标识开始和结束帧
}, {
borderRadius: ‘25%‘,
borderColor: ‘green‘,
transform: ‘scale(.65) translateY(-25px)‘,
offset: .4,
}, {
borderRadius: ‘50%‘,
borderColor: ‘blue‘,
transform: `scale(.3) translateY(-20px)`,
offset: 1
}], 2000, {
scrollSource: ‘#scroller‘,//滚动元素
timeRange: 2000,//时间
startScrollOffset: 0,//开始滚动动画的位置
endScrollOffset: 85,//结束滚动动画的位置
})
标签：没有 自身 导航栏 border 事件 safe 哪些 控制 top
原文地址：https://www.cnblogs.com/shenyuiOS/p/12833953.html
