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 // #endif\r\n }\r\n style.backgroundColor = this.bgColor\r\n return deepMerge(addStyle(this.customStyle), style)\r\n },\r\n // 吸顶内容的样式\r\n stickyContent() {\r\n const style = {}\r\n if (!this.cssSticky) {\r\n style.position = this.fixed ? 'fixed' : 'static'\r\n style.top = this.stickyTop + 'px'\r\n style.left = this.left + 'px'\r\n style.width = this.width == 'auto' ? 'auto' : this.width + 'px'\r\n style.zIndex = this.uZindex\r\n }\r\n return style\r\n },\r\n uZindex() {\r\n return this.zIndex ? this.zIndex : 970\r\n },\r\n },\r\n mounted() {\r\n this.init()\r\n },\r\n methods: {\r\n init() {\r\n this.getStickyTop()\r\n // 判断使用的模式\r\n this.checkSupportCssSticky()\r\n // 如果不支持css sticky，则使用js方案，此方案性能比不上css方案\r\n if (!this.cssSticky) {\r\n !this.stickyToTop && this.initObserveContent()\r\n }\r\n },\r\n $uGetRect(selector, all) {\r\n return new Promise((resolve) => {\r\n uni\r\n .createSelectorQuery()\r\n .in(this)\r\n [all ? 'selectAll' : 'select'](selector)\r\n .boundingClientRect((rect) => {\r\n if (all && Array.isArray(rect) && rect.length) {\r\n resolve(rect)\r\n }\r\n if (!all && rect) {\r\n resolve(rect)\r\n }\r\n })\r\n .exec()\r\n })\r\n },\r\n initObserveContent() {\r\n // 获取吸顶内容的高度，用于在js吸顶模式时，给父元素一个填充高度，防止\"塌陷\"\r\n this.$uGetRect('#' + this.elId).then((res) => {\r\n this.height = res.height\r\n this.left = res.left\r\n this.width = res.width\r\n this.$nextTick(() => {\r\n this.observeContent()\r\n })\r\n })\r\n },\r\n observeContent() {\r\n // 先断掉之前的观察\r\n this.disconnectObserver('contentObserver')\r\n const contentObserver = uni.createIntersectionObserver({\r\n // 检测的区间范围\r\n thresholds: [0.95, 0.98, 1],\r\n })\r\n // 到屏幕顶部的高度时触发\r\n contentObserver.relativeToViewport({\r\n top: -this.stickyTop,\r\n })\r\n // 绑定观察的元素\r\n contentObserver.observe(`#${this.elId}`, (res) => {\r\n this.setFixed(res.boundingClientRect.top)\r\n })\r\n this.contentObserver = contentObserver\r\n },\r\n setFixed(top) {\r\n // 判断是否出于吸顶条件范围\r\n const fixed = top <= this.stickyTop\r\n this.fixed = fixed\r\n },\r\n disconnectObserver(observerName) {\r\n // 断掉观察，释放资源\r\n const observer = this[observerName]\r\n observer && observer.disconnect()\r\n },\r\n getStickyTop() {\r\n this.stickyTop = getPx(this.offsetTop) + getPx(this.customNavHeight)\r\n },\r\n async checkSupportCssSticky() {\r\n // #ifdef H5\r\n // H5，一般都是现代浏览器，是支持css sticky的，这里使用创建元素嗅探的形式判断\r\n if (this.checkCssStickyForH5()) {\r\n this.cssSticky = true\r\n }\r\n // #endif\r\n\r\n // 如果安卓版本高于8.0，依然认为是支持css sticky的(因为安卓7在某些机型，可能不支持sticky)\r\n if (os() === 'android' && Number(sys().system) > 8) {\r\n this.cssSticky = true\r\n }\r\n\r\n // APP-Vue和微信平台，通过computedStyle判断是否支持css sticky\r\n // #ifdef APP-VUE || MP-WEIXIN\r\n this.cssSticky = await this.checkComputedStyle()\r\n // #endif\r\n\r\n // ios上，从ios6开始，都是支持css sticky的\r\n if (os() === 'ios') {\r\n this.cssSticky = true\r\n }\r\n\r\n // nvue，是支持css sticky的\r\n // #ifdef APP-NVUE\r\n this.cssSticky = true\r\n // #endif\r\n },\r\n // 在APP和微信小程序上，通过uni.createSelectorQuery可以判断是否支持css sticky\r\n checkComputedStyle() {\r\n // 方法内进行判断，避免在其他平台生成无用代码\r\n // #ifdef APP-VUE || MP-WEIXIN\r\n return new Promise((resolve) => {\r\n uni\r\n .createSelectorQuery()\r\n .in(this)\r\n .select('.u-sticky')\r\n .fields({\r\n computedStyle: ['position'],\r\n })\r\n .exec((e) => {\r\n resolve(e[0].position === 'sticky')\r\n })\r\n })\r\n // #endif\r\n },\r\n // H5通过创建元素的形式嗅探是否支持css sticky\r\n // 判断浏览器是否支持sticky属性\r\n checkCssStickyForH5() {\r\n // 方法内进行判断，避免在其他平台生成无用代码\r\n // #ifdef H5\r\n const vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-']\r\n const vendorListLength = vendorList.length\r\n const stickyElement = document.createElement('div')\r\n for (let i = 0; i < vendorListLength; i++) {\r\n stickyElement.style.position = vendorList[i] + 'sticky'\r\n if (stickyElement.style.position !== '') {\r\n return true\r\n }\r\n }\r\n return false\r\n // #endif\r\n },\r\n },\r\n beforeUnmount() {\r\n this.disconnectObserver('contentObserver')\r\n },\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n \r\n.u-sticky {\r\n /* #ifdef APP-VUE || MP-WEIXIN */\r\n // 此处默认写sticky属性，是为了给微信和APP通过uni.createSelectorQuery查询是否支持css sticky使用\r\n position: sticky;\r\n /* #endif */\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/ui/su-sticky/su-sticky.vue'\nwx.createComponent(Component)"],"names":["sheep","guid","addUnit","deepMerge","addStyle","uni","getPx","os","sys"],"mappings":"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"} |