Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge of this article, "how to design click-scroll components in Mini Program", so the editor gave you a summary of the following contents, detailed contents, clear steps, and a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to design click-scroll components in Mini Program" article.

one。 Background

Some business requirements require that the content displayed at the front end can be dragged and viewed in the form of scroll, but too many scroll bars cause the page to be too messy, so the click-scroll component is encapsulated. Set the location and space size of the display on the component, place the actual content to be displayed inside the component, and the width or length of the actual content displayed is controlled by the component.

two。 Function

When the width of the content within the component exceeds the width of the component, a "move left and right" interaction automatically occurs on both sides of the component.

When the content displayed internally exceeds the visible area of the component, you can click and drag in the visible area of the component to view the content

three。 Background knowledge, measurement of element size

1. Offset (offset dimension):

All the visible space occupied by an element on the screen, and the visible size of the element is determined by its height and width, including all inner margins, scroll bars, and border sizes. It is determined by four values: offsetHeight, offsetWidth, offsetLeft, and offsetRight.

OffsetHeight: the amount of space occupied by an element in the vertical direction, in pixels. Includes the height of the element, the (visible) height of the horizontal scroll bar, the height of the upper border, and the height of the lower border.

OffsetWidth: the amount of space occupied by an element in the horizontal direction, in pixels. Includes the width of the element, the width of the (visible) vertical scroll bar, the width of the left border, and the width of the right border.

OffsetLeft: the pixel distance between the left outer border of an element and the left inner border of the containing element. d.

OffsetTop: the pixel distance between the upper outer border of an element and the upper inner border of the containing element.

two。 Client area size (client dimension)

The space occupied by the content of the element and its inner margin is not counted as the space occupied by the scroll bar.

ClientWidth: the width of the element content area plus the width of the left and right margin

ClientHeight: the height of the element's content area plus the upper and lower inner margins

3. Scroll size (scroll dimension)

The size of the element that contains the scrolling content.

ScrollHeight: the actual total height of the content of the element without a scroll bar.

ScrollWidth: the actual total width of the content of the element without a scroll bar.

ScrollLeft: the number of pixels hidden on the left side of the content area. You can change the scrolling position of the element by setting this property.

ScrollTop: the number of pixels hidden above the content area. You can change the scrolling position of the element by setting this property.

four。 Component design idea

five。 Working with documentation

Slot:

Parameter description type content component actual content to display dom I am the actual content to show ah.

six。 Component source code

No data import store from'@ / store'export default {name: 'cards-container', data () {return {hasContent: false, domId: {compID: `hui-comp-$ {+ new Date ()} `, containerID: `hui-container-$ {+ new Date ()}`}, drag: {isShow: false, isLeft: false, isRight: false} Methods: {judgeHasContent () {this.hasContent = this.$slots.hasOwnProperty ('content')}, judgeDragIsShow () {const compWidth = this.getCompWidth () const contextMaxWidth = this.getContextMaxWidth () if (compWidth > = contextMaxWidth) {this.drag.isShow = false} else {this.drag.isShow = true} return this.drag.isShow} JudgeIsLeft () {const containerDom = this.getContainerDom () const contentWidth = this.getContextMaxWidth () if (! containerDom & &! contentWidth) this.drag.isLeft = false if (containerDom.offsetWidth + containerDom.scrollLeft > = contentWidth) {this.drag.isLeft = false} else {this.drag.isLeft = true} JudgeIsRight () {const containerDom = this.getContainerDom () if (! containerDom) this.drag.isRight = false if (containerDom.scrollLeft = 0) {this.drag.isRight = false} else {this.drag.isRight = true}}, getCompDom () {return document.getElementById (this.domId.compID) | | null}, getCompWidth () {const compDom = this.getCompDom () if (! compDom) {return 0} else {return compDom.offsetWidth}} GetContainerDom () {return document.getElementById (this.domId.containerID) | | null}, getContextMaxWidth () {if (! this.$refs.hasOwnProperty ('container')) {return 0} else {const widthArr = [] for (let e of this.$refs [' container'] .childNodes) {widthArr.push (e.offsetWidth)} return Math.max (. WidthArr)}} OnMouseDown (e) {/ / manually slide const containerDom = this.getContainerDom () if (! containerDom) return let scrollLeft = containerDom.scrollLeft const containerLeft = containerDom.offsetLeft let ev = e | window.event let offsetLeft = ev.clientX-containerLeft _ document.onmousemove = (e) = > {let ev = e | window.event let nowOffsetLeft = ev.clientX-containerLeft containerDom.scrollLeft = scrollLeft + (offsetLeft-nowOffsetLeft) this.judgeIsLeft () this.judgeIsRight () } _ document.onmouseup = () = > {_ document.onmousemove = null _ document.onmouseup = null}} OnClickLeft () {/ / Slide left if (! this.hasContent & &! this.drag.isLeft) return const containerDom = this.getContainerDom () if (! containerDom) return const scrollWidth = containerDom.offsetWidth containerDom.scrollLeft + = scrollWidth this.judgeIsLeft () this.judgeIsRight ()} OnClickRight () {/ / swipe right if (! this.hasContent & &! this.drag.isRight) return const containerDom = this.getContainerDom () if (! containerDom) return const scrollWidth = containerDom.offsetWidth containerDom.scrollLeft-= scrollWidth this.judgeIsLeft () this.judgeIsRight ()}} Updated () {this.$nextTick () const isShow = this.judgeDragIsShow () if (isShow) {this.judgeIsLeft () this.judgeIsRight ()})}, mounted () {this.judgeHasContent () const isShow = this.judgeDragIsShow () if (isShow) {this.judgeIsLeft () this.judgeIsRight ()} above is about how to design click-scroll components in Mini Program. I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.