vue.js格式使用vant-页面引入2

一、上拉刷新和加载

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <!-- 引入样式文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css">

  <!-- 引入 Vue 和 Vant 的 JS 文件 -->

  <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>

</head>

<body>

</body>

<template>
  <div id="video_wrap">
    <div class="video_tab">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" @load="onLoad">
          
        </van-list>
        <div class="no_more" v-show="finished">---到底了哦---.</div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
  let vm = new Vue({
    el: "#app",
    data() {
      return {
        videoList: [],//用于存放加载的数据
        loading: false,//控制上拉加载的加载动画
        finished: false,//控制在页面往下移动到底部时是否调用接口获取数据
        isLoading: false,//控制下拉刷新的加载动画
        pageNum: 1, // 页数
        offset: 0,  // 下次加载起始页
        totalPage: 0 // 总页数
      }
    },
    template: "#video_wrap"//通过该属性可以将自定义的template属性中的内容全部替换app的内容，并且会覆盖里面原有的内容，并且在查看dom结构时没有template标签
    , methods: {
      async init() {
        let that = this;
        let params = {
          offset: (that.pageNum - 1) * 8
        };
        let res = await axios.get(this.$HOST + '/open/health/message/center/app/videoList', params);
        that.videoList = res.result.videosAll.data; // 第一页内容
        that.pageNum = res.result.videosAll.page; // 当前显示页
        that.totalPage = Math.ceil(res.result.videosAll.total / res.result.videosAll.limit); // 总页数
        if (res.result.videosAll.total < 10) {
          that.finished = true; // 加载结束
          that.isLoading = false;
          that.loading = false;
          return false;
        }
      },

      async concatData() {
        let that = this;
        that.pageNum += 1;
        // 数据全部加载完成
        let params = {
          offset: (that.pageNum - 1) * 8
        };
        let res = await this.$http.get(this.$HOST + '/open/health/message/center/app/videoList', params);
        if (res.result.videosAll.total < 10) {
          that.finished = true; // 加载结束
          that.isLoading = false;
          that.loading = false;
          return false;
        }
        that.videoList = that.videoList.concat(res.result.videosAll.data);
        this.loading = false;
        if (this.pageNum >= this.totalPage) {
          that.finished = true; // 加载结束
          that.isLoading = false;
          that.loading = false;
        }
      },
      onRefresh() {
        setTimeout(() => {
          this.$toast({
            message: '刷新成功',
            position: 'bottom'
          });
          this.isLoading = false;
          this.pageNum = 1;
          this.loading = false;
          this.finished = false;
          this.isLoading = false;
          this.init();
        }, 500);
      },

      onLoad() {
        // 异步更新数据
        setTimeout(() => {
          this.concatData();
        }, 500);
      }
    },
    async created() {
      this.init();
    }

  });
</script>

</html>

参考请求方法。如果不想让按钮在一开始的时候存在，而是在滚动了一定的距离的时候再出现，那设置一个滚动条的监听就搞定啦，

mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },

//methods中定义事件
handleScroll(env){
      let scrollTop = document.getElementsByClassName('equi_container')[0].scrollTop
      if(scrollTop > 100){
        this.flag_scroll = true
      }else {
        this.flag_scroll = false
      }
    },

案例例子

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css">

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            overflow: hidden;
        }
        /*禁用接管浏览器滚动条*/

        .list{
            margin-top:46px;
            overflow:auto;
        }
        .list-item{
            text-align:center;
        }
    </style>
</head>

<body>
    <div id="app">

    </div>
    <!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
    <template id="first">
        <div>
            <van-nav-bar fixed title="数据列表" right-text="退出登录"></van-nav-bar>


            <div class="list" id="list">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                    <van-list v-model="loading" :finished="finished" @load="onLoad" :offset="10">
                        <div class="list-item">
                            <van-cell v-for="(item,key) in list" :key="key" :title="item + '' " />
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>


        </div>
    </template>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                list: [],
                loading: false,   //是否处于加载状态
                finished: false,  //是否已加载完所有数据
                isLoading: false,   //是否处于下拉刷新状态
            },
            template: "#first"//通过该属性可以将自定义的template属性中的内容全部替换app的内容，并且会覆盖里面原有的内容，并且在查看dom结构时没有template标签
            , methods: {
                onLoad() {      //上拉加载
                    setTimeout(() => {
                        for (let i = 0; i < 15; i++) {
                            this.list.push(this.list.length + 1);
                        }
                        this.loading = false;
                        if (this.list.length >= 60) {
                            this.finished = true;
                        }
                    }, 500);
                },
                onRefresh() {       //下拉刷新
                    setTimeout(() => {
                        this.finished = false;
                        this.isLoading = false;
                        this.list = []
                        this.onLoad()
                    }, 500);
                }
            },
            mounted() {

                let winHeight = document.documentElement.clientHeight;                          //浏览器视口大小
                document.getElementById("list").style.height = (winHeight - 50) + "px"  //调整框高度

            }
        });
    </script>

</body>

</html>

vue.js格式使用vant-页面引入2

一、上拉刷新和加载

猜你喜欢