基于IScroll插件的vue自定义滚动组件

最新推荐文章于 2024-09-06 17:16:52 发布

快乐小沙弥

最新推荐文章于 2024-09-06 17:16:52 发布

阅读量759

点赞数

分类专栏： vue 文章标签： vue vue滚动组件

本文链接：https://blog.csdn.net/yulin009/article/details/85625196

版权

本文介绍了如何在Vue项目中利用IScroll插件创建自定义滚动组件，详细讲解了IScroll的集成步骤和组件的封装过程，帮助开发者实现平滑且功能丰富的滚动效果。

摘要由CSDN通过智能技术生成

<template>
  <div id="wrapper" ref="wrapper" :class="className">
    <div class="scroller" :class="{'scroll-static': showIcon && !scrolling, 'no-scroll': !up && !down}" ref="scroller">
      <div class="scroll-head-mask" v-if="up" :style="headbg"></div>
      <div v-if="up" :style="textColor" class="scroll-head tc">
        <p v-show="showBeforeText">松开刷新</p>
        <p :class="{'no-fixation': !shadowIcon}" >
          <span class="shadow-icon" :style="shadowColor"></span>
          <span class="pull-icon" ref="pullIcon"></span>
        </p>
        <span class="size10">上次更新时间： {
  { headText }}</span>
      </div>
      <slot>
        <!-- <div class="tc">暂无数据</div> -->
      </slot>
      <div class="scroll-foot" v-if="down">
        <div v-show="!allLoaded">{
  { footText }}</div>
        <div v-show="allLoaded">全部加载完成</div>
      </div>
    </div>
  </div>
</template>
<script>
/**
 * @author liyulin
 * @description 下拉刷新，上拉加载组件
 * @date 2018-7-4
 * @param value Object 控制关闭刷新,IScroll重新计算滚动高度
 * @param up Boolean 是否需要下拉刷新
 * @param down Boolean 是否需要上拉刷新
 * @param allLoaded Boolean 是否全部加载完毕
 * @param refreshColor Object 自定义头部样式
 * @param className String wrapper类名
 * @param getScrilling Boolean 滚动时是否需要scroll实例信息
 * @event refresh 下拉刷新事件
 * @event getMore 上拉加载更多
 * @method scrollIntoView 使内容滚动到视图区域，同原生srollIntoView,默认参数true
 */
import IScroll from '@/assets/js/iscroll-probe'
import { formatDate } from '@/assets/js/utils'
export default {
  name: 'NfScroll',
  props: {
    value: {
      type: [Boolean, Number],
      default: true
    },
    up: {
      type: [Boolean, Number],
      default: false
    },
    down: {
      type: [Boolean, Number],
      default: false
    },
    allLoaded: {
      type: [Boolean, Number],
      default: false
    },
    refreshColor: {
      type: Object,
      default() {
        retu