| | |
| | | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { |
| | | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; |
| | | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); |
| | | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; |
| | | return c > 3 && r && Object.defineProperty(target, key, r), r; |
| | | }; |
| | | import { SuperComponent, wxComponent } from '../common/src/index'; |
| | | import props from './props'; |
| | | import config from '../common/config'; |
| | | import pageScrollMixin from '../mixins/page-scroll'; |
| | | import { getRect } from '../common/utils'; |
| | | const { prefix } = config; |
| | | const name = `${prefix}-sticky`; |
| | | const ContainerClass = `.${name}`; |
| | | let Sticky = class Sticky extends SuperComponent { |
| | | constructor() { |
| | | super(...arguments); |
| | | this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`]; |
| | | this.properties = props; |
| | | this.behaviors = [pageScrollMixin()]; |
| | | this.observers = { |
| | | 'offsetTop, disabled, container'() { |
| | | this.onScroll(); |
| | | }, |
| | | }; |
| | | this.data = { |
| | | prefix, |
| | | classPrefix: name, |
| | | containerStyle: '', |
| | | contentStyle: '', |
| | | }; |
| | | this.methods = { |
| | | onScroll(event) { |
| | | const { scrollTop } = event || {}; |
| | | const { container, offsetTop, disabled } = this.properties; |
| | | if (disabled) { |
| | | this.setDataAfterDiff({ |
| | | isFixed: false, |
| | | transform: 0, |
| | | }); |
| | | return; |
| | | } |
| | | this.scrollTop = scrollTop || this.scrollTop; |
| | | if (typeof container === 'function') { |
| | | Promise.all([getRect(this, ContainerClass), this.getContainerRect()]).then(([root, container]) => { |
| | | if (!root || !container) |
| | | return; |
| | | if (offsetTop + root.height > container.height + container.top) { |
| | | this.setDataAfterDiff({ |
| | | isFixed: false, |
| | | transform: container.height - root.height, |
| | | }); |
| | | } |
| | | else if (offsetTop >= root.top) { |
| | | this.setDataAfterDiff({ |
| | | isFixed: true, |
| | | height: root.height, |
| | | transform: 0, |
| | | }); |
| | | } |
| | | else { |
| | | this.setDataAfterDiff({ isFixed: false, transform: 0 }); |
| | | } |
| | | }); |
| | | return; |
| | | } |
| | | getRect(this, ContainerClass).then((root) => { |
| | | if (!root) |
| | | return; |
| | | if (offsetTop >= root.top) { |
| | | this.setDataAfterDiff({ isFixed: true, height: root.height }); |
| | | this.transform = 0; |
| | | } |
| | | else { |
| | | this.setDataAfterDiff({ isFixed: false }); |
| | | } |
| | | }); |
| | | }, |
| | | setDataAfterDiff(data) { |
| | | const { offsetTop } = this.properties; |
| | | const { containerStyle: prevContainerStyle, contentStyle: prevContentStyle } = this.data; |
| | | const { isFixed, height, transform } = data; |
| | | wx.nextTick(() => { |
| | | let containerStyle = ''; |
| | | let contentStyle = ''; |
| | | if (isFixed) { |
| | | containerStyle += `height:${height}px;`; |
| | | contentStyle += `position:fixed;top:${offsetTop}px;left:0;right:0;`; |
| | | } |
| | | if (transform) { |
| | | const translate = `translate3d(0, ${transform}px, 0)`; |
| | | contentStyle += `-webkit-transform:${translate};transform:${translate};`; |
| | | } |
| | | if (prevContainerStyle !== containerStyle || prevContentStyle !== contentStyle) { |
| | | this.setData({ containerStyle, contentStyle }); |
| | | } |
| | | this.triggerEvent('scroll', { |
| | | scrollTop: this.scrollTop, |
| | | isFixed, |
| | | }); |
| | | }); |
| | | }, |
| | | getContainerRect() { |
| | | const nodesRef = this.properties.container(); |
| | | return new Promise((resolve) => nodesRef.boundingClientRect(resolve).exec()); |
| | | }, |
| | | }; |
| | | } |
| | | ready() { |
| | | this.onScroll(); |
| | | } |
| | | }; |
| | | Sticky = __decorate([ |
| | | wxComponent() |
| | | ], Sticky); |
| | | export default Sticky; |
| | | import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import props from"./props";import config from"../common/config";import pageScrollMixin from"../mixins/page-scroll";import{getRect}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-sticky`,ContainerClass=`.${name}`;let Sticky=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-content`],this.properties=props,this.behaviors=[pageScrollMixin()],this.observers={"offsetTop, disabled, container"(){this.onScroll()}},this.data={prefix:prefix,classPrefix:name,containerStyle:"",contentStyle:""},this.methods={onScroll(t){const{scrollTop:e}=t||{},{container:i,offsetTop:o,disabled:s}=this.properties;s?this.setDataAfterDiff({isFixed:!1,transform:0}):(this.scrollTop=e||this.scrollTop,"function"!=typeof i?getRect(this,ContainerClass).then(t=>{t&&(o>=t.top?(this.setDataAfterDiff({isFixed:!0,height:t.height}),this.transform=0):this.setDataAfterDiff({isFixed:!1}))}):Promise.all([getRect(this,ContainerClass),this.getContainerRect()]).then(([t,e])=>{t&&e&&(o+t.height>e.height+e.top?this.setDataAfterDiff({isFixed:!1,transform:e.height-t.height}):o>=t.top?this.setDataAfterDiff({isFixed:!0,height:t.height,transform:0}):this.setDataAfterDiff({isFixed:!1,transform:0}))}))},setDataAfterDiff(t){const{offsetTop:e}=this.properties,{containerStyle:i,contentStyle:o}=this.data,{isFixed:s,height:r,transform:n}=t;wx.nextTick(()=>{let t="",a="";if(s&&(t+=`height:${r}px;`,a+=`position:fixed;top:${e}px;left:0;right:0;`),n){const t=`translate3d(0, ${n}px, 0)`;a+=`-webkit-transform:${t};transform:${t};`}i===t&&o===a||this.setData({containerStyle:t,contentStyle:a}),this.triggerEvent("scroll",{scrollTop:this.scrollTop,isFixed:s})})},getContainerRect(){const t=this.properties.container();return new Promise(e=>t.boundingClientRect(e).exec())}}}ready(){this.onScroll()}};Sticky=__decorate([wxComponent()],Sticky);export default Sticky; |