粘性布局组件。Sticky 组件与 CSS 中 position: sticky 属性实现的效果一致,当组件在屏幕范围内时,会按照正常的布局排列,当组件滚出屏幕范围时,始终会固定在屏幕顶部。
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
offset-top | Number | 0 | 否 | 吸顶时与顶部的距离,单位px |
z-index | Number | 99 | 否 | 吸顶时的 z-index |
container | function | null | 否 | 一个函数,返回容器对应的 NodesRef 节点 |
disabled | Boolean | false | 否 | 是否禁用 |
bindscroll | eventhandle | 否 | 滚动时触发,{scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |
通过 offset-top 属性可以设置组件在吸顶时与顶部的距离
<mp-sticky offset-top="32">
<button size="mini" type="primary" style="margin-left: 115px; background-color: #1989fa">吸顶距离</button>
</mp-sticky>
通过 container 属性可以指定组件的容器,页面滚动时,组件会始终保持在容器范围内,当组件即将超出容器底部时,会返回原位置。
<view id="container" style="height: 250px; background-color: #E0E0E0;">
<view style="height: 100px; background-color: #FFFF99;"></view>
<mp-sticky container="{{container}}" offset-top="64">
<button size="mini" type="primary" style="margin-left: 215px; background-color: #ff976a">指定容器</button>
</mp-sticky>
</view>
Page({
data: {
container: null
},
onReady() {
this.setData({
container: () => wx.createSelectorQuery().select("#container")
})
}
})
#概览新增:对于 v-if/v-else/v-else-if的各分支项key将不再是必须的,因为现在 Vue 会自动生成唯一的key。非兼容:如果你手动提...
#$data类型:Object详细:组件实例观察的数据对象。组件实例代理了对其 data 对象 property 的访问。参考选项 / 数据 - data#$pr...
链接是XHTML文档中的下一个元素。本章的内容讨论如何完成XHTML文档的链接,如何在网站中插入图像以及如何创建超链接。XHTML中的...
字体样式标签为文本增加了更丰富的效果。格式化时使用它们。这些标签与HTML中使用的标签完全相似。其中一些标签是粗体,斜体等粗...