1 line
13 KiB
Plaintext
1 line
13 KiB
Plaintext
|
{"version":3,"file":"su-sticky.js","sources":["../../../../../../src/sheep/ui/su-sticky/su-sticky.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC91aS9zdS1zdGlja3kvc3Utc3RpY2t5LnZ1ZQ"],"sourcesContent":["<template>\r\n <view class=\"u-sticky\" :id=\"elId\" :style=\"[style]\">\r\n <view :style=\"[stickyContent]\" class=\"u-sticky__content\"><slot /></view>\r\n </view>\r\n</template>\r\n\r\n<script>\r\nimport { deepMerge, addStyle, addUnit, sleep, guid, getPx, os, sys } from '@/sheep/helper'\r\nimport sheep from '@/sheep'\r\n/**\r\n * sticky 吸顶\r\n * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。\r\n * @property {String ｜ Number}\toffsetTop\t\t吸顶时与顶部的距离，单位px（默认 0 ）\r\n * @property {String ｜ Number}\tcustomNavHeight\t自定义导航栏的高度 （h5 默认44 其他默认 0 ）\r\n * @property {Boolean}\t\t\tstickyToTop\t\t是否开启吸顶功能 （默认 false ）\r\n * @property {String}\t\t\tbgColor\t\t\t组件背景颜色（默认 '#ffffff' ）\r\n * @property {String ｜ Number}\tzIndex\t\t\t吸顶时的z-index值\r\n * @property {String ｜ Number}\tindex\t\t\t自定义标识，用于区分是哪一个组件\r\n * @property {Object}\t\t\tcustomStyle\t\t组件的样式，对象形式\r\n * @event {Function} fixed\t\t组件吸顶时触发\r\n * @event {Function} unfixed\t组件取消吸顶时触发\r\n * @example <u-sticky offsetTop=\"200\"><view>塞下秋来风景异，衡阳雁去无留意</view></u-sticky>\r\n */\r\nexport default {\r\n name: 'su-sticky',\r\n props: {\r\n // 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px\r\n offsetTop: {\r\n type: [String, Number],\r\n default: 0,\r\n },\r\n // 自定义导航栏的高度\r\n customNavHeight: {\r\n type: [String, Number],\r\n // #ifdef H5\r\n // H5端的导航栏属于“自定义”导航栏的范畴，因为它是非原生的，与普通元素一致\r\n default: 44,\r\n // #endif\r\n // #ifndef H5\r\n default: sheep.$platform.navbar,\r\n // #endif\r\n },\r\n // 是否开启吸顶功能\r\n stickyToTop: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n // 吸顶区域的背景颜色\r\n bgColor: {\r\n type: String,\r\n default: 'transparent',\r\n },\r\n // z-index值\r\n zIndex: {\r\n type: [String, Number],\r\n default: '',\r\n },\r\n // 列表中的索引值\r\n index: {\r\n type: [String, Number],\r\n default: '',\r\n },\r\n customStyle: {\r\n type: [Object, String],\r\n default: () => ({}),\r\n },\r\n },\r\n data() {\r\n return {\r\n cssSticky: false, // 是否使用css的sticky实现\r\n stickyTop: 0, // 吸顶的top值，因为可能受自定义导航栏影响，最终的吸顶值非offsetTop值\r\n elId: guid(),\r\n left: 0, // js模式时，吸顶的内容因为处于postition: fixed模式，为了和原来保持一致的样式，需要记录并重新设置它的left，height，width属性\r\n width: 'auto',\r\n height: 'auto',\r\n fixed: false, // js模式时，是否处于吸顶模式\r\n }\r\n },\r\n computed: {\r\n style() {\r\n const style = {}\r\n if (!this.stickyToTop) {\r\n if (this.cssSticky) {\r\n style.position = 'sticky'\r\n style.zIndex = this.uZindex\r\n style.top = addUnit(this.stickyTop)\r\n } else {\r\n style.height = this.fixed ? this.height + 'px' : 'auto'\r\n }\r\n } else {\r\n // 无需吸顶时，设置会默认的relative(nvue)和非nvue的static静态模式即可\r\n // #ifdef APP-NVUE\r\n style.position = 'relative'\r\n // #endif\r\n // #ifndef APP-NVUE\r\n style.position = 'static'\r\n //
|