From 9ab4955166b7b1370fc2a49b152353241ca9e64a Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 16 十月 2023 09:22:23 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-sticky/u-sticky.vue | 212 -----------------------------------------------------
1 files changed, 0 insertions(+), 212 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-sticky/u-sticky.vue b/minipro_standard/uni_modules/uview-ui/components/u-sticky/u-sticky.vue
index ff74688..e69de29 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-sticky/u-sticky.vue
+++ b/minipro_standard/uni_modules/uview-ui/components/u-sticky/u-sticky.vue
@@ -1,212 +0,0 @@
-<template>
- <view
- class="u-sticky"
- :id="elId"
- :style="[style]"
- >
- <view
- :style="[stickyContent]"
- class="u-sticky__content"
- >
- <slot />
- </view>
- </view>
-</template>
-
-<script>
- import props from './props.js';;
- /**
- * sticky 鍚搁《
- * @description 璇ョ粍浠朵笌CSS涓璸osition: sticky灞炴�у疄鐜扮殑鏁堟灉涓�鑷达紝褰撶粍浠惰揪鍒伴璁剧殑鍒伴《閮ㄨ窛绂绘椂锛� 灏变細鍥哄畾鍦ㄦ寚瀹氫綅缃紝缁勪欢浣嶇疆澶т簬棰勮鐨勯《閮ㄨ窛绂绘椂锛屼細閲嶆柊鎸夌収姝ｅ父鐨勫竷灞�鎺掑垪銆�
- * @tutorial https://www.uviewui.com/components/sticky.html
- * @property {String 锝� Number} offsetTop 鍚搁《鏃朵笌椤堕儴鐨勮窛绂伙紝鍗曚綅px锛堥粯璁� 0 锛�
- * @property {String 锝� Number} customNavHeight 鑷畾涔夊鑸爮鐨勯珮搴� 锛坔5 榛樿44 鍏朵粬榛樿 0 锛�
- * @property {Boolean} disabled 鏄惁寮�鍚惛椤跺姛鑳� 锛堥粯璁� false 锛�
- * @property {String} bgColor 缁勪欢鑳屾櫙棰滆壊锛堥粯璁� '#ffffff' 锛�
- * @property {String 锝� Number} zIndex 鍚搁《鏃剁殑z-index鍊�
- * @property {String 锝� Number} index 鑷畾涔夋爣璇嗭紝鐢ㄤ簬鍖哄垎鏄摢涓�涓粍浠�
- * @property {Object} customStyle 缁勪欢鐨勬牱寮忥紝瀵硅薄褰㈠紡
- * @event {Function} fixed 缁勪欢鍚搁《鏃惰Е鍙�
- * @event {Function} unfixed 缁勪欢鍙栨秷鍚搁《鏃惰Е鍙�
- * @example <u-sticky offsetTop="200"><view>濉炰笅绉嬫潵椋庢櫙寮傦紝琛￠槼闆佸幓鏃犵暀鎰�</view></u-sticky>
- */
- export default {
- name: 'u-sticky',
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {
- cssSticky: false, // 鏄惁浣跨敤css鐨剆ticky瀹炵幇
- stickyTop: 0, // 鍚搁《鐨則op鍊硷紝鍥犱负鍙兘鍙楄嚜瀹氫箟瀵艰埅鏍忓奖鍝嶏紝鏈�缁堢殑鍚搁《鍊奸潪offsetTop鍊�
- elId: uni.$u.guid(),
- left: 0, // js妯″紡鏃讹紝鍚搁《鐨勫唴瀹瑰洜涓哄浜巔ostition: fixed妯″紡锛屼负浜嗗拰鍘熸潵淇濇寔涓�鑷寸殑鏍峰紡锛岄渶瑕佽褰曞苟閲嶆柊璁剧疆瀹冪殑left锛宧eight锛寃idth灞炴��
- width: 'auto',
- height: 'auto',
- fixed: false, // js妯″紡鏃讹紝鏄惁澶勪簬鍚搁《妯″紡
- }
- },
- computed: {
- style() {
- const style = {}
- if(!this.disabled) {
- if (this.cssSticky) {
- style.position = 'sticky'
- style.zIndex = this.uZindex
- style.top = uni.$u.addUnit(this.stickyTop)
- } else {
- style.height = this.fixed ? this.height + 'px' : 'auto'
- }
- } else {
- // 鏃犻渶鍚搁《鏃讹紝璁剧疆浼氶粯璁ょ殑relative(nvue)鍜岄潪nvue鐨剆tatic闈欐�佹ā寮忓嵆鍙�
- // #ifdef APP-NVUE
- style.position = 'relative'
- // #endif
- // #ifndef APP-NVUE
- style.position = 'static'
- // #endif
- }
- style.backgroundColor = this.bgColor
- return uni.$u.deepMerge(uni.$u.addStyle(this.customStyle), style)
- },
- // 鍚搁《鍐呭鐨勬牱寮�
- stickyContent() {
- const style = {}
- if (!this.cssSticky) {
- style.position = this.fixed ? 'fixed' : 'static'
- style.top = this.stickyTop + 'px'
- style.left = this.left + 'px'
- style.width = this.width == 'auto' ? 'auto' : this.width + 'px'
- style.zIndex = this.uZindex
- }
- return style
- },
- uZindex() {
- return this.zIndex ? this.zIndex : uni.$u.zIndex.sticky
- }
- },
- mounted() {
- this.init()
- },
- methods: {
- init() {
- this.getStickyTop()
- // 鍒ゆ柇浣跨敤鐨勬ā寮�
- this.checkSupportCssSticky()
- // 濡傛灉涓嶆敮鎸乧ss sticky锛屽垯浣跨敤js鏂规锛屾鏂规鎬ц兘姣斾笉涓奵ss鏂规
- if (!this.cssSticky) {
- !this.disabled && this.initObserveContent()
- }
- },
- initObserveContent() {
- // 鑾峰彇鍚搁《鍐呭鐨勯珮搴︼紝鐢ㄤ簬鍦╦s鍚搁《妯″紡鏃讹紝缁欑埗鍏冪礌涓�涓～鍏呴珮搴︼紝闃叉"濉岄櫡"
- this.$uGetRect('#' + this.elId).then((res) => {
- this.height = res.height
- this.left = res.left
- this.width = res.width
- this.$nextTick(() => {
- this.observeContent()
- })
- })
- },
- observeContent() {
- // 鍏堟柇鎺変箣鍓嶇殑瑙傚療
- this.disconnectObserver('contentObserver')
- const contentObserver = uni.createIntersectionObserver({
- // 妫�娴嬬殑鍖洪棿鑼冨洿
- thresholds: [0.95, 0.98, 1]
- })
- // 鍒板睆骞曢《閮ㄧ殑楂樺害鏃惰Е鍙�
- contentObserver.relativeToViewport({
- top: -this.stickyTop
- })
- // 缁戝畾瑙傚療鐨勫厓绱�
- contentObserver.observe(`#${this.elId}`, res => {
- this.setFixed(res.boundingClientRect.top)
- })
- this.contentObserver = contentObserver
- },
- setFixed(top) {
- // 鍒ゆ柇鏄惁鍑轰簬鍚搁《鏉′欢鑼冨洿
- const fixed = top <= this.stickyTop
- this.fixed = fixed
- },
- disconnectObserver(observerName) {
- // 鏂帀瑙傚療锛岄噴鏀捐祫婧�
- const observer = this[observerName]
- observer && observer.disconnect()
- },
- getStickyTop() {
- this.stickyTop = uni.$u.getPx(this.offsetTop) + uni.$u.getPx(this.customNavHeight)
- },
- async checkSupportCssSticky() {
- // #ifdef H5
- // H5锛屼竴鑸兘鏄幇浠ｆ祻瑙堝櫒锛屾槸鏀寔css sticky鐨勶紝杩欓噷浣跨敤鍒涘缓鍏冪礌鍡呮帰鐨勫舰寮忓垽鏂�
- if (this.checkCssStickyForH5()) {
- this.cssSticky = true
- }
- // #endif
-
- // 濡傛灉瀹夊崜鐗堟湰楂樹簬8.0锛屼緷鐒惰涓烘槸鏀寔css sticky鐨�(鍥犱负瀹夊崜7鍦ㄦ煇浜涙満鍨嬶紝鍙兘涓嶆敮鎸乻ticky)
- if (uni.$u.os() === 'android' && Number(uni.$u.sys().system) > 8) {
- this.cssSticky = true
- }
-
- // APP-Vue鍜屽井淇″钩鍙帮紝閫氳繃computedStyle鍒ゆ柇鏄惁鏀寔css sticky
- // #ifdef APP-VUE || MP-WEIXIN
- this.cssSticky = await this.checkComputedStyle()
- // #endif
-
- // ios涓婏紝浠巌os6寮�濮嬶紝閮芥槸鏀寔css sticky鐨�
- if (uni.$u.os() === 'ios') {
- this.cssSticky = true
- }
-
- // nvue锛屾槸鏀寔css sticky鐨�
- // #ifdef APP-NVUE
- this.cssSticky = true
- // #endif
- },
- // 鍦ˋPP鍜屽井淇″皬绋嬪簭涓婏紝閫氳繃uni.createSelectorQuery鍙互鍒ゆ柇鏄惁鏀寔css sticky
- checkComputedStyle() {
- // 鏂规硶鍐呰繘琛屽垽鏂紝閬垮厤鍦ㄥ叾浠栧钩鍙扮敓鎴愭棤鐢ㄤ唬鐮�
- // #ifdef APP-VUE || MP-WEIXIN
- return new Promise(resolve => {
- uni.createSelectorQuery().in(this).select('.u-sticky').fields({
- computedStyle: ["position"]
- }).exec(e => {
- resolve('sticky' === e[0].position)
- })
- })
- // #endif
- },
- // H5閫氳繃鍒涘缓鍏冪礌鐨勫舰寮忓梾鎺㈡槸鍚︽敮鎸乧ss sticky
- // 鍒ゆ柇娴忚鍣ㄦ槸鍚︽敮鎸乻ticky灞炴��
- checkCssStickyForH5() {
- // 鏂规硶鍐呰繘琛屽垽鏂紝閬垮厤鍦ㄥ叾浠栧钩鍙扮敓鎴愭棤鐢ㄤ唬鐮�
- // #ifdef H5
- const vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'],
- vendorListLength = vendorList.length,
- stickyElement = document.createElement('div')
- for (let i = 0; i < vendorListLength; i++) {
- stickyElement.style.position = vendorList[i] + 'sticky'
- if (stickyElement.style.position !== '') {
- return true
- }
- }
- return false;
- // #endif
- }
- },
- beforeDestroy() {
- this.disconnectObserver('contentObserver')
- }
- }
-</script>
-
-<style lang="scss" scoped>
- .u-sticky {
- /* #ifdef APP-VUE || MP-WEIXIN */
- // 姝ゅ榛樿鍐檚ticky灞炴�э紝鏄负浜嗙粰寰俊鍜孉PP閫氳繃uni.createSelectorQuery鏌ヨ鏄惁鏀寔css sticky浣跨敤
- position: sticky;
- /* #endif */
- }
-</style>
--
Gitblit v1.9.3