Pull to Refresh

You can create a pull-to-refresh UI using one axis.

Pull to prepend

• 
  egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
• 
  egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
• 
  egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
• 
  egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
• 
  egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
• 
  egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
• 
  egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
• 
  egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
• 
  egjs is Javascript components group that brings easiest and fastest way to build a web application in your way
• 
  egjs is Javascript components group that brings easiest and fastest way to build a web application in your way

Pull to append

JavaScript

<div>
  <p>You can create a pull-to-refresh UI using one axis.</p>
  <div id="pull-contentWrapper">
    <div id="prepend">Pull to prepend</div>
    <ul id="pull-content">
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/1.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/2.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/3.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/4.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/5.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>

      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/6.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/7.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/8.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/9.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
      <li class="pull_drw">
        <div class="pull_im">
          <img src="../image/pulltorefresh/10.jpg" width="110"/>
        </div>
        <div class="pull_tx">
          <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
        </div>
      </li>
    </ul>
    <div id="append">Pull to append</div>
  </div>
  <div class="bottomWapper"></div>
</div>

const contentWrapper = document.getElementById("pull-contentWrapper");
const content = document.getElementById("pull-content");
const prepend = document.getElementById("prepend");
const append = document.getElementById("append");

function getInfo(pos) {
  const state = pos > 0 ? (pos - axes.axis.scroll.range[1])/100 : -pos/100;
  return {
    isAdd: state > 0.8,
    isTop: pos < 0,
  };
}

function getMaxRange() {
  return content.getBoundingClientRect().height - contentWrapper.getBoundingClientRect().height
}

function getItem() {
  const el = document.createElement("li");
  el.className = "pull_drw addblinking";
  el.innerHTML = `<div class="pull_im">
      <img src="../image/pulltorefresh/${Math.floor((Math.random() * 50) + 1)}.jpg" width="110"/>
    </div>
    <div class="pull_tx">
      <span class="pull_tit">egjs is Javascript components group that brings easiest and fastest way to build a web application in your way</span>
    </div>`;
    return el;
}

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  scroll: {
    range: [0, getMaxRange()],
    bounce: 100
  }
});

// 2. attach event handler
axes.on({
  "change": ({pos}) => {
    content.style[eg.Axes.TRANSFORM] = `translate3d(0, ${-pos.scroll}px, 0)`;
    if (axes.isBounceArea()) {
      const info = getInfo(pos.scroll);
      if (info.isAdd) {
        info.isTop ? (prepend.innerText = "Release to prepend") :
          (append.innerText = "Release to append");
      } else {
        info.isTop ? (prepend.innerText = "Pull to prepend") :
          (append.innerText = "Pull to append");
      }
    }
  },
  "release" : ({depaPos}) => {
    if (axes.isBounceArea()) {
      const info = getInfo(depaPos.scroll);
      if (info.isAdd) {
        const el = getItem();
        info.isTop ?
          content.insertBefore(el, content.firstChild) :
          content.appendChild(el);
        axes.axis.scroll.range[1] = getMaxRange();
      }
    }
  }
});

// 3. Initialize inputTypes and connect it
axes.connect(["", "scroll"], new eg.Axes.PanInput(contentWrapper, {
  scale : [0, -1]
}));

React

import React, { useEffect, useState, useRef } from "react";

import { useAxes, PanInput } from "@egjs/react-axes";
import "../../css/demos/pulltorefresh.css";

declare function require(path: string): any;

export default function PullToRefresh() {
  const [slides, setSlides] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
  const [range, setRange] = useState(0);
  const contentWrapper = useRef<HTMLDivElement>(null);
  const content = useRef<HTMLDivElement>(null);

  const { connect, setAxis, setTo, onChange, onRelease, isBounceArea, scroll } = useAxes({
    scroll: {
      range: [0, 0],
      bounce: 120,
    },
  });

  const getMaxRange = (content: HTMLElement, contentWrapper: HTMLElement) => {
    return (
      content.getBoundingClientRect().height -
      contentWrapper.getBoundingClientRect().height
    );
  };

  onChange(({ pos }) => {
    const prepend = document.getElementById("prepend");
    const append = document.getElementById("append");
    if (isBounceArea()) {
      const info = getInfo(pos.scroll);
      if (info.isAdd) {
        if (info.isTop) {
          prepend.innerText = "Release to prepend";
        } else {
          append.innerText = "Release to append";
        }
      } else {
        if (info.isTop) {
          prepend.innerText = "Pull to prepend";
        } else {
          append.innerText = "Pull to append";
        }
      }
    }
  });

  onRelease(({ depaPos }) => {
    if (isBounceArea()) {
      const info = getInfo(depaPos.scroll);
      if (info.isAdd) {
        const newIndex = Math.floor(Math.random() * 50 + 1);
        if (info.isTop) {
          setSlides([newIndex, ...slides]);
          setTo({ scroll: 0 });
        } else {
          setSlides([...slides, newIndex]);
        }
        setAxis({
          scroll: {
            range: [0, getMaxRange(content.current, contentWrapper.current)],
          },
        });
      }
    }
  });

  const getInfo = (pos) => {
    const state = pos > 0 ? (pos - range) / 120 : -pos / 120;
    return {
      isAdd: state > 0.8,
      isTop: pos < 0,
    };
  };

  useEffect(() => {
    const maxRange = getMaxRange(content.current, contentWrapper.current);

    setRange(maxRange);
    setAxis({
      scroll: {
        range: [0, maxRange],
      },
    });
    connect(
      ["", "scroll"],
      new PanInput(contentWrapper, {
        scale: [0, -1],
      })
    );
  }, []);

  return (
    <div>
      <p>You can create a pull-to-refresh UI using one axis.</p>
      <div id="pull-contentWrapper" ref={contentWrapper}>
        <div id="prepend">Pull to prepend</div>
        <ul id="pull-content" style={{ transform: `translate3d(0, ${-scroll}px, 0)` }} ref={content}>
          {slides.map((img, i) => (
            <li className="pull_drw" key={i}>
              <div className="pull_im">
                <img src={ require(`@site/static/img/demos/pulltorefresh/${img}.jpg`).default} width="110" />
              </div>
              <div className="pull_tx">
                <span className="pull_tit">
                  egjs is Javascript components group that brings easiest and
                  fastest way to build a web application in your way
                </span>
              </div>
            </li>
          ))}
        </ul>
        <div id="append">Pull to append</div>
      </div>
      <div className="bottomWapper"></div>
    </div>
  );
};

Vue@2

<template>
  <div class="App">
    <p>You can create a pull-to-refresh UI using one axis.</p>
    <div id="pull-contentWrapper" ref="contentWrapper">
      <div id="prepend">Pull to prepend</div>
      <ul id="pull-content" :style="{ transform: `translate3d(0, ${-scroll}px, 0)` }" ref="content">
        <li class="pull_drw" v-for="i in slides" height="150" v-bind:key="i">
          <div class="pull_im">
            <img :src="`${require('../../../static/img/demos//pulltorefresh/' + i + '.jpg')}`" width="110" />
          </div>
          <div class="pull_tx">
            <span class="pull_tit">
              egjs is Javascript components group that brings easiest and
              fastest way to build a web application in your way
            </span>
          </div>
        </li>
      </ul>
      <div id="append">Pull to append</div>
    </div>
    <div class="bottomWapper"></div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted } from "@vue/composition-api";
import { useAxes, PanInput } from "@egjs/vue2-axes";

export default defineComponent({
  name: "App",
  setup() {
    const slides = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
    const range = ref(0);

    const { connect, setAxis, setTo, onChange, onRelease, isBounceArea, scroll } = useAxes({
      scroll: {
        range: [0, 0],
        bounce: 120,
      },
    });

    const getMaxRange = (content: HTMLElement, contentWrapper: HTMLElement) => {
      return (
        content.getBoundingClientRect().height -
        contentWrapper.getBoundingClientRect().height
      );
    };

    const getInfo = (pos) => {
      const state = pos > 0 ? (pos - range.value) / 120 : -pos / 120;
      return {
        isAdd: state > 0.8,
        isTop: pos < 0,
      };
    };

    onChange(({ pos }) => {
      const prepend = document.getElementById("prepend");
      const append = document.getElementById("append");
      if (isBounceArea()) {
        const info = getInfo(pos.scroll);
        if (info.isAdd) {
          if (info.isTop) {
            prepend.innerText = "Release to prepend";
          } else {
            append.innerText = "Release to append";
          }
        } else {
          if (info.isTop) {
            prepend.innerText = "Pull to prepend";
          } else {
            append.innerText = "Pull to append";
          }
        }
      }
    });

    onRelease(({ depaPos }) => {
      if (isBounceArea()) {
        const contentWrapper = document.getElementById("pull-contentWrapper");
        const content = document.getElementById("pull-content");
        const info = getInfo(depaPos.scroll);
        if (info.isAdd) {
          const newIndex = Math.floor(Math.random() * 50 + 1);
          if (info.isTop) {
            slides.value = [newIndex, ...slides.value];
            setTo({ scroll: 0 });
          } else {
            slides.value = [...slides.value, newIndex];
          }
          setAxis({
            scroll: {
              range: [0, getMaxRange(content, contentWrapper)],
            },
          });
        }
      }
    });

    onMounted(() => {
      const contentWrapper = document.getElementById("pull-contentWrapper");
      const content = document.getElementById("pull-content");
      const maxRange = getMaxRange(content, contentWrapper);

      range.value = maxRange;
      setAxis({
        scroll: {
          range: [0, maxRange],
        },
      });
      connect(
        ["", "scroll"],
        new PanInput(contentWrapper, {
          scale: [0, -1],
        })
      );
    });

    return {
      slides,
      scroll,
    };
  },
});
</script>

Vue@3

<template>
  <div class="App">
    <p>You can create a pull-to-refresh UI using one axis.</p>
    <div id="pull-contentWrapper" ref="contentWrapper">
      <div id="prepend">Pull to prepend</div>
      <ul id="pull-content" :style="{ transform: `translate3d(0, ${-scroll}px, 0)` }" ref="content">
        <li class="pull_drw" v-for="i in slides" height="150" v-bind:key="i">
          <div class="pull_im">
            <img :src="`${require('../../../static/img/demos//pulltorefresh/' + i + '.jpg')}`" width="110" />
          </div>
          <div class="pull_tx">
            <span class="pull_tit">
              egjs is Javascript components group that brings easiest and
              fastest way to build a web application in your way
            </span>
          </div>
        </li>
      </ul>
      <div id="append">Pull to append</div>
    </div>
    <div class="bottomWapper"></div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted } from "vue";
import { useAxes, PanInput } from "@egjs/vue-axes";

export default defineComponent({
  name: "App",
  setup() {
    const slides = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
    const range = ref(0);

    const { connect, setAxis, setTo, onChange, onRelease, isBounceArea, scroll } = useAxes({
      scroll: {
        range: [0, 0],
        bounce: 120,
      },
    });

    const getMaxRange = (content: HTMLElement, contentWrapper: HTMLElement) => {
      return (
        content.getBoundingClientRect().height -
        contentWrapper.getBoundingClientRect().height
      );
    };

    const getInfo = (pos) => {
      const state = pos > 0 ? (pos - range.value) / 120 : -pos / 120;
      return {
        isAdd: state > 0.8,
        isTop: pos < 0,
      };
    };

    onChange(({ pos }) => {
      const prepend = document.getElementById("prepend");
      const append = document.getElementById("append");
      if (isBounceArea()) {
        const info = getInfo(pos.scroll);
        if (info.isAdd) {
          if (info.isTop) {
            prepend.innerText = "Release to prepend";
          } else {
            append.innerText = "Release to append";
          }
        } else {
          if (info.isTop) {
            prepend.innerText = "Pull to prepend";
          } else {
            append.innerText = "Pull to append";
          }
        }
      }
    });

    onRelease(({ depaPos }) => {
      if (isBounceArea()) {
        const contentWrapper = document.getElementById("pull-contentWrapper");
        const content = document.getElementById("pull-content");
        const info = getInfo(depaPos.scroll);
        if (info.isAdd) {
          const newIndex = Math.floor(Math.random() * 50 + 1);
          if (info.isTop) {
            slides.value = [newIndex, ...slides.value];
            setTo({ scroll: 0 });
          } else {
            slides.value = [...slides.value, newIndex];
          }
          setAxis({
            scroll: {
              range: [0, getMaxRange(content, contentWrapper)],
            },
          });
        }
      }
    });

    onMounted(() => {
      const contentWrapper = document.getElementById("pull-contentWrapper");
      const content = document.getElementById("pull-content");
      const maxRange = getMaxRange(content, contentWrapper);

      range.value = maxRange;
      setAxis({
        scroll: {
          range: [0, maxRange],
        },
      });
      connect(
        ["", "scroll"],
        new PanInput(contentWrapper, {
          scale: [0, -1],
        })
      );
    });

    return {
      slides,
      scroll,
    };
  },
});
</script>

Svelte

<script>
  import { onMount } from "svelte";
  import { useAxes, PanInput } from "@egjs/svelte-axes";

  let slides = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  let range = 0;
  let contentWrapper;
  let content;

  const { connect, setAxis, setTo, onChange, onRelease, isBounceArea, scroll } = useAxes({
    scroll: {
      range: [0, 0],
      bounce: 120,
    },
  });

  const getMaxRange = (content, contentWrapper) => {
    return (
      content.getBoundingClientRect().height -
      contentWrapper.getBoundingClientRect().height
    );
  };

  onChange(({ pos }) => {
    const prepend = document.getElementById("prepend");
    const append = document.getElementById("append");
    if (isBounceArea()) {
      const info = getInfo(pos.scroll);
      if (info.isAdd) {
        if (info.isTop) {
          prepend.innerText = "Release to prepend";
        } else {
          append.innerText = "Release to append";
        }
      } else {
        if (info.isTop) {
          prepend.innerText = "Pull to prepend";
        } else {
          append.innerText = "Pull to append";
        }
      }
    }
  });

  onRelease(({ depaPos }) => {
    if (isBounceArea()) {
      const info = getInfo(depaPos.scroll);
      if (info.isAdd) {
        const newIndex = Math.floor(Math.random() * 50 + 1);
        if (info.isTop) {
          slides = [newIndex, ...slides];
          setTo({ scroll: 0 });
        } else {
          slides = [...slides, newIndex];
        }
        setAxis({
          scroll: {
            range: [0, getMaxRange(content, contentWrapper)],
          },
        });
      }
    }
  });

  const getInfo = (pos) => {
    const state = pos > 0 ? (pos - range) / 120 : -pos / 120;
    return {
      isAdd: state > 0.8,
      isTop: pos < 0,
    };
  };

  onMount(() => {
    const maxRange = getMaxRange(content, contentWrapper);

    range = maxRange;
    setAxis({
      scroll: {
        range: [0, maxRange],
      },
    });
    connect(
      ["", "scroll"],
      new PanInput(contentWrapper, {
        scale: [0, -1],
      })
    );
  });
</script>

<div>
  <p>You can create a pull-to-refresh UI using one axis.</p>
  <div id="pull-contentWrapper" bind:this={contentWrapper}>
    <div id="prepend">Pull to prepend</div>
    <ul id="pull-content" style="transform: translate3d(0, {-$scroll}px, 0)" bind:this={content}>
      {#each slides as img}
        <li class="pull_drw">
          <div class="pull_im">
            <img src="../image/pulltorefresh/{img}.jpg" width="110"/>
          </div>
          <div class="pull_tx">
            <span class="pull_tit">
              egjs is Javascript components group that brings easiest and
              fastest way to build a web application in your way
            </span>
          </div>
        </li>
      {/each}
    </ul>
    <div id="append">Pull to append</div>
  </div>
  <div class="bottomWapper"></div>
</div>