Analysis of loadmore component in vue mint-ui-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Analysis of loadmore component in vue mint-ui

小云云

Jan 25, 2018 am 10:33 AM

parse

This article mainly introduces the loadmore component of vue mint-ui source code analysis. The editor thinks it is quite good. Now I will share it with you and give it a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Access

Official access document mint-ui loadmore document

Access using Example

html

<p id="app">
  <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :max-distance="150"
         @top-status-change="handleTopChange" ref="loadmore">

    <p slot="top" class="mint-loadmore-top">
      <span v-show="topStatus === &#39;pull&#39;" :class="{ &#39;rotate&#39;: topStatus === &#39;drop&#39; }">↓</span>
      <span v-show="topStatus === &#39;loading&#39;">Loading...</span>
      <span v-show="topStatus === &#39;drop&#39;">释放更新</span>
    </p>

    <ul class="scroll-wrapper">
      <li v-for="item in list" @click="itemClick(item)">{{ item }}</li>
    </ul>

  </mt-loadmore>
</p>

css

<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css" rel="external nofollow" >
*{
  margin: 0;
  padding: 0;
}
html, body{
  height: 100%;
}

#app{

  height: 100%;
  overflow: scroll;
}
.scroll-wrapper{
  margin: 0;
  padding: 0;
  list-style: none;

}
.scroll-wrapper li{
  line-height: 120px;
  font-size: 60px;
  text-align: center;
}

<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<script>
  new Vue({
    el: &#39;#app&#39;,
    data: {
      list: [],
      allLoaded: false,
      topStatus: &#39;&#39;
    },
    created: function () {
      var i =0, len=20;
      for (; i< len; i++){
        this.list.push(&#39;demo&#39; + i);
      }

    },
    methods: {
      loadTop: function () { // 刷新数据的操作
        var self = this;
        setTimeout(function () {
          self.list.splice(0, self.list.length);
          var i =0, len=20;
          for (; i< len; i++){
            self.list.push(&#39;demo&#39; + i);
          }
          self.$refs.loadmore.onTopLoaded();
        }, 2000);
      },
      loadBottom: function () { // 加载更多数据的操作
        //load data

        //this.allLoaded = true;// 若数据已全部获取完毕
        var self = this;
        setTimeout(function () {
          var i =0; len = 10;
          for (; i< len; i++){
            self.list.push(&#39;dddd&#39; + i);
          }
          self.$refs.loadmore.onBottomLoaded();
        }, 2000);

      },
      handleTopChange: function (status) {
        this.topStatus = status;
      },
      itemClick: function (data) {
        console.log(&#39;item click, msg : &#39; + data);
      }
    }
  });
</script>

Implementation principle analysis

Layout principle

The loadmore component is composed of three slots, namely name=top, name=bottom, default;
top is used to display the content displayed in different states by pull-down refresh. The margin-top is initially set to the height of -top to hide itself
bottom is the same as top, used to display pull-up loading to display more content in different states
default fills in scrolling details

Implementation principle

Mainly implemented through the monitoring of js touch events
In the touchmove event, if it is sliding down And the scrollTop of the scrolling dom is 0, then the entire component is offset downward (sliding distance/ratio) to display the content of the top solt
At touchmove time, if it is sliding upward and Slide to the bottom, and then continue to slide the entire component upward (sliding distance/ratio) to display the content of bottom sold

Source code analysis

Component template html

 <p class="mint-loadmore">
  <p class="mint-loadmore-content" :class="{ &#39;is-dropped&#39;: topDropped || bottomDropped}" :style="{ &#39;transform&#39;: &#39;translate3d(0, &#39; + translate + &#39;px, 0)&#39; }">
   <slot name="top">
    <p class="mint-loadmore-top" v-if="topMethod">
     <spinner v-if="topStatus === &#39;loading&#39;" class="mint-loadmore-spinner" :size="20" type="fading-circle"></spinner>
     <span class="mint-loadmore-text">{{ topText }}</span>
    </p>
   </slot>
   <slot></slot>
   <slot name="bottom">
    <p class="mint-loadmore-bottom" v-if="bottomMethod">
     <spinner v-if="bottomStatus === &#39;loading&#39;" class="mint-loadmore-spinner" :size="20" type="fading-circle"></spinner>
     <span class="mint-loadmore-text">{{ bottomText }}</span>
    </p>
   </slot>
  </p>
 </p>

Regarding the spinner tag above, it is a component and will not be introduced in detail here. The content in the top soldt and bottom slot is the displayed content and can be passed in through external customization.

In fact, its implementation has a very serious drawback, that is, the height of the top solder and bottom slot is programmed to 50px, and the processing in js is also logically processed using 50px. Therefore, it meets the needs of customizing top slot and bottom slot in our development.

js core analysis

props analysis: For the analysis of props, you can refer to the official documentation of mint-ui
data Analysis

data() {
 return {
  translate: 0, // 此变量决定当前组件上下移动,
  scrollEventTarget: null, // 滚动的dom节点
  containerFilled: false, // 当前滚动的内容是否填充完整,不完成会调用 loadmore的回调函数
  topText: &#39;&#39;, // 下拉刷新,显示的文本
  topDropped: false, // 记录当前drop状态,用给组件dom添加is-dropped class(添加回到原点的动画)
  bottomText: &#39;&#39;, // 上拉加载更多 显示的文本
  bottomDropped: false, // 同topDropped
  bottomReached: false, // 当前滚动是否滚动到了底部
  direction: &#39;&#39;, // touch-move过程中, 当前滑动的方向
  startY: 0, // touch-start 起始的y的坐标值
  startScrollTop: 0, // touch-start 起始的滚动dom的 scrollTop
  currentY: 0, // touch-move 过程中的 y的坐标
  topStatus: &#39;&#39;, // 下拉刷新的状态: pull(下拉) drop(释放) loading(正在加载数据)
  bottomStatus: &#39;&#39; // 上拉加载更多的状态: 状态同上
 };
}

The above specific functions of each data data are explained in detail through comments.

watch analysis

watch: {
 topStatus(val) {
  this.$emit(&#39;top-status-change&#39;, val);
  switch (val) {
   case &#39;pull&#39;:
    this.topText = this.topPullText;
    break;
   case &#39;drop&#39;:
    this.topText = this.topDropText;
    break;
   case &#39;loading&#39;:
    this.topText = this.topLoadingText;
    break;
  }
 },

 bottomStatus(val) {
  this.$emit(&#39;bottom-status-change&#39;, val);
  switch (val) {
   case &#39;pull&#39;:
    this.bottomText = this.bottomPullText;
    break;
   case &#39;drop&#39;:
    this.bottomText = this.bottomDropText;
    break;
   case &#39;loading&#39;:
    this.bottomText = this.bottomLoadingText;
    break;
  }
 }
}

The above are the two variables that the component monitors through watch. Later we can see that their changes are processed in the touchmove event. changed. Its function is to change the text content of the top slot and bottom slot through its changes;

At the same time, the status-change event is issued for external use, because the contents of the top slot and bottom slot may be customized externally. , use this event to notify the outside of the current status for external processing.

Analysis of core functions

I won’t list all the methods here. The following will analyze the corresponding ones according to the processing. method function.

First of all, the entry point is to execute the init function in the hook callback of the component's mounted life cycle

mounted() {
 this.init();// 当前 vue component挂载完成之后, 执行init()函数
}

init function:

init() {
  this.topStatus = &#39;pull&#39;;
  this.bottomStatus = &#39;pull&#39;;
  this.topText = this.topPullText;
  this.scrollEventTarget = this.getScrollEventTarget(this.$el); // 获取滚动的dom节点
  if (typeof this.bottomMethod === &#39;function&#39;) {
   this.fillContainer(); // 判断当前滚动内容是否填满,没有执行外部传入的loadmore回调函数加载数据
   this.bindTouchEvents(); // 为当前组件dom注册touch事件
  }
  if (typeof this.topMethod === &#39;function&#39;) {
   this.bindTouchEvents();
  }
 },

 fillContainer() {
  if (this.autoFill) {
   this.$nextTick(() => {
    if (this.scrollEventTarget === window) {
     this.containerFilled = this.$el.getBoundingClientRect().bottom >=
      document.documentElement.getBoundingClientRect().bottom;
    } else {
     this.containerFilled = this.$el.getBoundingClientRect().bottom >=
      this.scrollEventTarget.getBoundingClientRect().bottom;
    }
    if (!this.containerFilled) { // 如果没有填满内容, 执行loadmore的操作
     this.bottomStatus = &#39;loading&#39;;
     this.bottomMethod();// 调用外部的loadmore函数,加载更多数据
    }
   });
  }
 }

The init function mainly performs some operations on initialization status and events. The following focuses on the processing of the callback function of the touch event.

First, the touchstart event callback processing function

 handleTouchStart(event) {
  this.startY = event.touches[0].clientY; // 手指按下的位置, 用于下面move事件计算手指移动的距离
  this.startScrollTop = this.getScrollTop(this.scrollEventTarget); // 起始scroll dom的 scrollTop(滚动的距离)
  //下面重置状态变量
  this.bottomReached = false;
  if (this.topStatus !== &#39;loading&#39;) {
   this.topStatus = &#39;pull&#39;;
   this.topDropped = false;
  }
  if (this.bottomStatus !== &#39;loading&#39;) {
   this.bottomStatus = &#39;pull&#39;;
   this.bottomDropped = false;
  }
 }

is mainly used to record the initial position and reset state variables.

Let’s continue with touchmove’s callback processing function

 handleTouchMove(event) {
  //确保当前touch节点的y的位置,在当前loadmore组件的内部
  if (this.startY < this.$el.getBoundingClientRect().top && this.startY > this.$el.getBoundingClientRect().bottom) {
   return;
  }
  this.currentY = event.touches[0].clientY;
  let distance = (this.currentY - this.startY) / this.distanceIndex;
  this.direction = distance > 0 ? &#39;down&#39; : &#39;up&#39;;
  // 下拉刷新,条件(1.外部传入了刷新的回调函数 2.滑动方向是向下的 3.当前滚动节点的scrollTop为0 4.当前topStatus不是loading)
  if (typeof this.topMethod === &#39;function&#39; && this.direction === &#39;down&#39; &&
   this.getScrollTop(this.scrollEventTarget) === 0 && this.topStatus !== &#39;loading&#39;) {
   event.preventDefault();
   event.stopPropagation();
   //计算translate(将要平移的距离), 如果当前移动的距离大于设置的最大距离,那么此次这次移动就不起作用了
   if (this.maxDistance > 0) {
    this.translate = distance <= this.maxDistance ? distance - this.startScrollTop : this.translate;
   } else {
    this.translate = distance - this.startScrollTop;
   }
   if (this.translate < 0) {
    this.translate = 0;
   }
   this.topStatus = this.translate >= this.topDistance ? &#39;drop&#39; : &#39;pull&#39;;// drop: 到达指定的阈值,可以执行刷新操作了
  }

  // 上拉操作, 判断当前scroll dom是否滚动到了底部
  if (this.direction === &#39;up&#39;) {
   this.bottomReached = this.bottomReached || this.checkBottomReached();
  }
  if (typeof this.bottomMethod === &#39;function&#39; && this.direction === &#39;up&#39; &&
   this.bottomReached && this.bottomStatus !== &#39;loading&#39; && !this.bottomAllLoaded) {
   event.preventDefault();
   event.stopPropagation();
   // 判断的逻辑思路同上
   if (this.maxDistance > 0) {
    this.translate = Math.abs(distance) <= this.maxDistance
     ? this.getScrollTop(this.scrollEventTarget) - this.startScrollTop + distance : this.translate;
   } else {
    this.translate = this.getScrollTop(this.scrollEventTarget) - this.startScrollTop + distance;
   }
   if (this.translate > 0) {
    this.translate = 0;
   }
   this.bottomStatus = -this.translate >= this.bottomDistance ? &#39;drop&#39; : &#39;pull&#39;;
  }
  this.$emit(&#39;translate-change&#39;, this.translate);
 }

The logic of the above code is quite simple, and there are relatively few comments.

Let’s focus on the checkBottomReached() function, which is used to determine whether the current scroll dom has scrolled to the bottom.

 checkBottomReached() {
  if (this.scrollEventTarget === window) {
   return document.body.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight;
  } else {
   return this.$el.getBoundingClientRect().bottom <= this.scrollEventTarget.getBoundingClientRect().bottom + 1;
  }
 }

After my testing, there is a problem with the above code:

When the scrollEventTarget is window, the above judgment is incorrect. of. Because document.body.scrollTop is always 1 smaller than the normal value, it cannot meet the condition of reaching the bottom;

When scrollEventTarget is not window, the above judgment condition does not need to be in this Add 1 after .scrollEventTarget.getBoundingClientRect().bottom, but adding 1 will not have much visual impact.

Finally let’s look at the handler function of the moveend event callback

 handleTouchEnd() {
  if (this.direction === &#39;down&#39; && this.getScrollTop(this.scrollEventTarget) === 0 && this.translate > 0) {
   this.topDropped = true; // 为当前组件添加 is-dropped class(也就是添加动画处理)
   if (this.topStatus === &#39;drop&#39;) { // 到达了loading的状态
    this.translate = &#39;50&#39;; // top slot的高度
    this.topStatus = &#39;loading&#39;;
    this.topMethod(); // 执行回调函数
   } else { // 没有到达,回调原点
    this.translate = &#39;0&#39;;
    this.topStatus = &#39;pull&#39;;
   }
  }
  // 处理逻辑同上
  if (this.direction === &#39;up&#39; && this.bottomReached && this.translate < 0) {
   this.bottomDropped = true;
   this.bottomReached = false;
   if (this.bottomStatus === &#39;drop&#39;) {
    this.translate = &#39;-50&#39;;
    this.bottomStatus = &#39;loading&#39;;
    this.bottomMethod();
   } else {
    this.translate = &#39;0&#39;;
    this.bottomStatus = &#39;pull&#39;;
   }
  }
  this.$emit(&#39;translate-change&#39;, this.translate);
  this.direction = &#39;&#39;;
 }
}

Summary

More implementation principles of pull-down refresh and pull-up loading can be learned from
getScrollEventTarget() to obtain the scrolling object, getScrollTop() to obtain the scrolling distance, and checkBottomReached() to determine whether to scroll to the end These three methods can be used for reference
Disadvantages: The height of the top slot and bottom slot is hard-coded, which is too inflexible; this place can be optimized

Related recommendations:

vue city selection 3-level linkage implementation method based on mint-ui

##vue mint-ui imitates Taobao Jingdong Receiving address four-level linkage

Detailed explanation of Vue.js's mobile component library mint-ui to achieve infinite scrolling loading more

The above is the detailed content of Analysis of loadmore component in vue mint-ui. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Python vs. JavaScript: Development Environments and ToolsApr 26, 2025 am 12:09 AM

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

Is JavaScript Written in C? Examining the EvidenceApr 25, 2025 am 12:15 AM

Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

JavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

From Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

The Role of C/C in JavaScript Interpreters and CompilersApr 20, 2025 am 12:01 AM

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

See all articles