自定义VUE与原生js手机端分页操作

已于 2024-07-12 13:23:57 修改
阅读量499 收藏 3
点赞数 3
文章标签： css 前端 javascript
于 2024-04-10 17:36:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44694682/article/details/137604894
版权

VUE分页配置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
  <script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
  <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
  <script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
  <style>
    .dlineui_header {
      width: 100%;
      line-height: 40px;
      background: #fff;
    }

    .dlineui_header .header_box {
      display: flex;
      justify-content: space-between;
    }

    .box_check {
      padding: 10px;
    }

    .box_check .van-checkbox__icon {
      background: #fff;
      border-radius: 50px;
    }

    .content {
      padding-bottom: 60px;
    }

    .content .content_box {
      width: 95%;
      margin: 0 auto;
      margin-top: 10px;
      border-radius: 10px;
      background: #fff;
      padding: 10px;
      display: flex;
      align-items: center;
      height: 50px;
    }

    .content .content_box .img {
      width: 40px;
      height: 40px;
      border-radius: 5px;
      overflow: hidden;
      margin-right: 5px;
    }

    .avatar_Wrap {
      width: 40px;
      height: 40px;
      border-radius: 5px;
    }

    .avatar_Wrap .avatar {
      width: 100%;
      height: 100%;
    }

    .content .content_box .content_box_time {
      display: flex;
      justify-content: space-between;
      padding: 10px 10px;
      border-radius: 5px;
    }

    .title {
      flex: 1;
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .van-search {
      padding: 10px 0;
    }

    .van-search .van-search__content {
      border-radius: 50px;
      background-color: #edf0f8;
    }


    .time {
      text-align: right;
      padding-left: 15px;
      color: #919191;
      font-size: 16px;
    }

    .bottom {
      position: fixed;
      bottom: 0;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
      height: 60px;
      font-size: 18px;
      text-align: center;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }


    .find .van-cell {
      width: 90%;
      margin: 0 auto;
      background: #eee;
      border-radius: 50px;
      line-height: 15px;
    }
  </style>
</head>
<!-- 定制页头 开始 -->
<script>
  $("#header .header_title").html("发放证书");
  $("title").html("发放证书");
</script>
<!-- 定制页头 结束 -->

<body>
  <div id="app">
    <van-sticky>
      <div class="dlineui_header">
        <div class="header_box" id="J_header_stype">
          <div class="header_leftarea">
            <div class="btn_back">
              1
            </div>
          </div>
          <div class="header_title">
            <span>已报俱乐部</span>
          </div>
          <div></div>
        </div>
        <div class="top_seach">
          <form action="">
            <van-search v-model="keyword" :clearable="false" label="" placeholder="请输入搜索关键词" @search="onSearch">
              <template #right-icon>
                <van-icon name="clear" style="cursor: pointer;" @click="onclear" v-if="keyword != ''" />
              </template>
            </van-search>
          </form>
        </div>
      </div>
    </van-sticky>
    <!-- 内容 全选反选 -->
    <div class="box_check" style="display: flex;align-items: center;">
      <van-checkbox v-model="checked">全选</van-checkbox>
      <span style="color: #9d9d9d;margin-left: 20px;">已选 <span style="color: #ccc;">({{selectmamth}})</span></span>
    </div>


    <div class="content" style="height: 70vh;overflow: auto;" @scroll="loadImg($event)">
      <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :offset='100'> -->
      <div class="content_box" v-for="(it,id) in list" :key="it.id" @click="btncheck(it,id)">
        <div style="margin-right:10px;">
          <van-checkbox v-model="it.checked" @change="changechecked(it)"></van-checkbox>
        </div>
        <div class="img" v-if="it.logos">
          <img :src="it.logos" alt="" srcset="" style="width: 100%;height: 100%;">
        </div>
        <div v-else class="avatar_Wrap">
          <div class="avatar"></div>
        </div>
        <div class="title">
          <div style="color: #383838;font-size: 14px;padding-bottom: 3px;word-wrap: break-word;word-break: break-all;">
            {{it.name}}</div>
          <div style="font-size: 14px;color: #919191;display: flex;justify-content: space-between;">
            <span>已报 {{it.order_count}}</span>
            <span>人数限制 {{it.join_peoplenumber}}</span>
            <span style="color: #3370EE;">{{it.riding_distance_total}}KM</span>
          </div>
        </div>
      </div>
      <!-- </van-list> -->
    </div>
    <!-- 最底部 -->
    <div class="bottom">
      <van-button round type="info" block @click="btnshow">批量修改俱乐部参与人数上限</van-button>
    </div>

    <!-- 弹框 -->
    <van-dialog v-model="show" title="人数限制" show-cancel-button @confirm="btn">
      <div class="find" style="padding: 15px 0;">
        <van-field v-model="maxvalue" label="" placeholder="请输入人数限制" />
      </div>
    </van-dialog>
  </div>
</body>
<script>
  // $("#J_header_stype .btn_back").html('<a class="back btn" href="javascript:history.back();"><img src="<?php echo base_url(); ?>static/index/club/img/back.png?v1" class="back_arrow"><span></span></a>');
  new Vue({
    el: '#app',
    template: ``,
    data: {
      club: "<?php echo $one_club_id; ?>",
      // clubList: _club_name_arr,
      //
      show: false,
      maxvalue: '',
      keyword: '',
      checked: false,
      // 列表
      page: 1,
      page_size: 10,
      list: [],
      loading: false,
      finished: false,


      // 选中的id集合
      checkIds: []
    },
    watch: {
      checked(val, value) {
        if (val) {
          this.list.forEach(it => it.checked = true);
        } else {
          this.list.forEach(it => it.checked = false);
        }
      }
    },
    computed: {
      selectmamth() {
        let num = 0
        this.list.forEach(it => {
          if (it.checked) {
            num++
          }
        })
        return num
      },
    },
    mounted() {
      this.getList(true);
    },
    methods: {
      changechecked(it) {
        const _this = this;
        if (_this.checkIds.length > 0) {
          const index = _this.checkIds.findIndex(item => item == it.id)
          if (index < 0) {
            _this.checkIds.push(it.id)
          }else{
            _this.checkIds.splice(index,1)
          }
        } else {
          _this.checkIds.push(it.id)
        }
        console.log(_this.checkIds,789)
      },
      // 下滑分页
      loadImg(event) {
        const _this = this;
        let el = event.target;
        if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
          _this.page++;
          if (_this.list.length < 10) {
            _this.page = 1;
            return;
          } else {
            _this.getList(false);
          }
        }
      },
      //选择
      btncheck(it, id) {
        if (it.checked) {
          this.list[id].checked = false
        } else {
          this.list[id].checked = true
        }
      },
      // 内容
      // onLoad() {
      //   const _this = this
      //   _this.getList(false)
      // },
      // 搜索
      onSearch() {
        const _this = this
        _this.getList(true)
      },
      // 清除
      onclear() {
        const _this = this
        // console.log(_this.keyword, 123)
        _this.keyword = ''
        _this.getList(true)
      },
      // 数据列表
      getList(val) {
        const _this = this
        if (val) {
          _this.page = 1
          _this.list = []
          _this.page_size = 10
        }
        // https://club.giant.com.cn/index.php/activity/appactivity_getclub_ajax/932711.html?page=0&keyword=&ctime=1709222400&end_date=1711900799&cdate=1708221864
        $.ajax({
          type: "get",
          // datatype: "json",
          // url: "<?php echo site_url('Activity_riding/hand_to_ajax'); ?>",
          url: 'index.json',
          // data: tmp_params,
          beforeSend: function () { },
          success: function (data) {
            if (typeof data != "object") {
              data = $.parseJSON(data);
            }
            if (data.status == 1) { //成功
              for (var i = 0; i < data.data.length; i++) {
                data.data[i].checked = false

                _this.list.push(data.data[i])
              }
              _this.loading = false;
              // 数据全部加载完成
              if (data.data.length < _this.page_size) {
                _this.finished = true;
              } else {
                _this.page++;
                _this.finished = false;
              }
              // 清空回显选中状态
              if (_this.keyword == '') {
                _this.checkIds && _this.checkIds.map((v, i) => {
                  // console.log(v, _this.list, 1111)
                  const index = _this.list.findIndex(item => item.id == v)
                  if (index > -1) _this.list[index].checked = true;
                })
              }else{
                _this.checkIds && _this.checkIds.map((v, i) => {
                  // console.log(v, _this.list, 1111)
                  const index = _this.list.findIndex(item => item.id == v)
                  if (index > -1) _this.list[index].checked = true;
                })
              }
            } else {
              _this.finished = true;
              _this.loading = false;
              $.fn.poptips({
                con: data.msg ? data.msg : '网络不稳定，请您稍后刷新重试',
                btnOKClick: function () { }
              });
            }
          },
          error: function (data, status, e) {
            _this.finished = true;
            _this.loading = false;
          }
        });
      },
      // 弹框
      btnshow() {
        const _this = this
        _this.show = true
      },
      // 提交
      btn() {
        const _this = this
        if (_this.maxvalue == '') {
          $.fn.poptips({
            con: '请输入人数限制',
            btnOKClick: function () { }
          });
          return
        }

        // 拼接id
        let str = ''
        _this.list.forEach(it => {
          if (it.checked) {
            str += it.id + ','
          }
        })
        var tmp_params = {
          activity_id: "<?php echo $activity_id; ?>",
          user_ids: str,
          club_id: _this.club,
        }
        $.ajax({
          type: "POST",
          datatype: "json",
          url: "<?php echo site_url('Activity_riding/hand_to_cert'); ?>",
          data: tmp_params,
          beforeSend: function () { },
          success: function (data) {
            if (typeof data != "object") {
              data = $.parseJSON(data);
            }
            if (data.status == 1) { //成功
              $.fn.poptips({
                con: data.msg,
                btnOKClick: function () {
                  //window.location.reload();
                  _this.getList(true)
                }
              });
            } else {
              $.fn.poptips({
                con: data.msg ? data.msg : '网络不稳定，请您稍后刷新重试',
                btnOKClick: function () {
                  //window.location.reload();
                  _this.getList(true)
                }
              });
            }
          },
          error: function (data, status, e) {

            return false;
          }
        });
      }
    },
  });
  // 通过 CDN 引入时不会自动注册 Lazyload 组件
  // 可以通过下面的方式手动注册
  Vue.use(vant.Lazyload);
</script>

</html>

{
	"sql": 1,
	"status": 1,
	"data": [{
		"aid": "176086",
		"logos": "https:\/\/giant-images.oss-cn-shanghai.aliyuncs.com\/club\/club\/15833798925659344.jpg",
		"name": "\u6377\u5b89\u7279\u9752\u5e74\u8defCYCLING WORLD",
		"id": "1811",
		"riding_distance_total": "337,499",
		"order_count": "261"
	}, {
		"aid": "178429",
		"logos": "https:\/\/club-static.giant.com.cn\/index\/club\/img\/logo.png",
		"name": "\u5eca\u574a\u4f53\u80b2\u573a\u6377\u5b89\u7279\u4f53\u9a8c\u4e2d\u5fc3",
		"id": "3797",
		"riding_distance_total": "216,617",
		"order_count": "222"
	}, {
		"aid": "176012",
		"logos": "https:\/\/giant-images.oss-cn-shanghai.aliyuncs.com\/club\/club\/15842023713356087.jpg",
		"name": "\u6d1b\u9633\u6377\u5b89\u7279\u9a91\u53cb\u9a7f\u7ad9\u5355\u8f66\u4ff1\u4e50\u90e8",
		"id": "4147",
		"riding_distance_total": "198,223",
		"order_count": "137"
	}, {
		"aid": "178220",
		"logos": "https:\/\/giant-images.oss-cn-shanghai.aliyuncs.com\/club\/club\/14846655282676040.jpg",
		"name": "\u4e34\u6c7e\u6377\u5b89\u7279\u5355\u8f66\u4ff1\u4e50\u90e8",
		"id": "587",
		"riding_distance_total": "188,110",
		"order_count": "177"
	}, {
		"aid": "178434",
		"logos": "https:\/\/giant-images.oss-cn-shanghai.aliyuncs.com\/club\/club\/15702441233462988.jpg",
		"name": "\u5043\u5e08\u6377\u5b89\u7279\u9a91\u53cb\u4ff1\u4e50\u90e8",
		"id": "7164",
		"riding_distance_total": "180,214",
		"order_count": "68"
	}, {
		"aid": "178418",
		"logos": "https:\/\/club-static.giant.com.cn\/index\/club\/img\/logo.png",
		"name": "\u67a3\u5e84\u6377\u5b89\u7279\u65e0\u9650\u5355\u8f66\u4ff1\u4e50\u90e8",
		"id": "750",
		"riding_distance_total": "170,613",
		"order_count": "134"
	}, {
		"aid": "176090",
		"logos": "https:\/\/giant-images.oss-cn-shanghai.aliyuncs.com\/club\/club\/1609474912201145.jpg",
		"name": "\u5510\u53bf\u6377\u5b89\u7279\u4ff1\u4e50\u90e8",
		"id": "940",
		"riding_distance_total": "168,632",
		"order_count": "227"
	}, {
		"aid": "175980",
		"logos": "https:\/\/giant-images.oss-cn-shanghai.aliyuncs.com\/club\/club\/16167268817033795.jpg",
		"name": "\u6377\u5b89\u7279\u78c1\u53bf\u4e50\u9a91\u5355\u8f66\u4ff1\u4e50\u90e8",
		"id": "971",
		"riding_distance_total": "150,743",
		"order_count": "65"
	}, {
		"aid": "176013",
		"logos": "https:\/\/club-static.giant.com.cn\/index\/club\/img\/logo.png",
		"name": "\u6377\u5b89\u7279\u5eca\u574a\u5efa\u56fd\u9053CYCLING WORLD",
		"id": "799",
		"riding_distance_total": "149,386",
		"order_count": "207"
	}, {
		"aid": "176057",
		"logos": "https:\/\/giant-images.oss-cn-shanghai.aliyuncs.com\/club\/club\/16042056799086036.jpg",
		"name": "\u5bff\u5149\u4e1c\u57ce\u6377\u5b89\u7279\u4ff1\u4e50\u90e8",
		"id": "812",
		"riding_distance_total": "141,069",
		"order_count": "127"
	}]
}

原生html+css+js 分页配置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>无限滚动列表</title>
  <style>
    /* styles.css */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    .scrollable {
      width: 100%;
      height: 300px;
      /* 设置适当的高度 */
      overflow-y: scroll;
      border: 1px solid #ccc;
    }

    .content {
      padding: 20px;
      border-bottom: 1px solid #ddd;
    }
  </style>
</head>

<body>
  <div id="scrollableDiv" class="scrollable">
    <!-- 这里可以放很多内容来测试滚动 -->
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content">Content 3</div>
    <div class="content">Content 4</div>
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content">Content 3</div>
    <div class="content">Content 4</div>
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content">Content 3</div>
    <div class="content">Content 4</div>
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content">Content 3</div>
    <div class="content">Content 4</div>
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content">Content 3</div>
    <div class="content">Content 4</div>
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content">Content 3</div>
    <div class="content">Content 4</div>
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content">Content 3</div>
    <div class="content">Content 4</div>
    <!-- 添加更多内容 -->
  </div>
  <script>
    // scripts.js
    document.addEventListener('DOMContentLoaded', function () {
      const scrollableDiv = document.getElementById('scrollableDiv');

      function isBottom(div) {
        return div.scrollHeight - div.scrollTop === div.clientHeight;
      }

      function handleScroll() {
        if (isBottom(scrollableDiv)) {
          console.log('触底了');
          // 在这里添加你希望触发的操作
        }
      }

      scrollableDiv.addEventListener('scroll', handleScroll);
    });


  </script>
</body>

</html>

在这里插入图片描述

vue技术框架下手机端移动上拉实现分页功能
欢迎大家交流前端开发技术、经验及各种知识沉淀
08-25 2341
页面初始化时，获取后端返回的数据（返回的数据是数组形式的），将数据等分成N份，用户每次上拉到底部时，渲染下一页的数据。即：用户上拉滑动时，会触动scroll事件，当【文档高度(scrollHight)小于滚动条高度(scrollTop)加页面可视高度(clientHeight)】时，触发滚动事件(scroll事件)，页面渲染下一页的数据。注意：scrollHight是整个页面文档的高度，scrollTop是文档内容顶部到可视窗口的高度，clientHeight是页面的视口大小，实际测试中需要scrollHi
前端使用 Vue.js 实现下拉刷新与上拉加载
最新发布
小白菜的博客
05-16 942
本文旨在为前端开发者提供在Vue.js项目中实现下拉刷新和上拉加载功能的全面指南。内容涵盖从基础实现到高级优化技巧，适用于各种移动端应用场景。本文将首先介绍核心概念，然后分别讲解下拉刷新和上拉加载的实现原理，接着提供实际代码示例，最后讨论性能优化和常见问题。下拉刷新(Pull-to-Refresh): 用户通过下拉手势触发数据重新加载的交互模式上拉加载(Infinite Scroll): 用户滚动到列表底部时自动加载更多数据的交互模式节流(Throttle): 限制函数在一定时间内只执行一次的技术。
移动端分页（懒加载,三个菜单切换在Vue中应用）
sky_LQ的博客
09-28 1744
&lt;template&gt;     &lt;div id="historicalEvaluation"&gt;         &lt;headMod :pageTitle="pageTitle"&gt;&lt;/headMod&gt;         &lt;div class="historicalEvaluationWarpHead"&gt;        
基于Vue的移动端分页组件
qq_33003143的博客
05-30 1073
整理自己开发的组件
vue中移动端分页组件pagination
weixin_30790841的博客
08-14 897
最近项目需要用到很简单的vue移动端分页组件，网上找了找，没有特别适合的，根据网上找来的代码，自己写了个简单的分页 根据设计稿，想要的就是最简单的，上一页，下一页，中间固定放三个显示页数的，不需要显示很多，也不需要省略号 原博客：https://blog.youkuaiyun.com/freya_yyy/article/details/81227016 效果图如下： 代码如下： p...
vue移动端分页
de_shy的博客
05-11 1570
vue 一次请求全部数据分页 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box { width: 500px; background: skyblue; margin: 0 auto; } span{ font-wei
Vue.js PDF分页加载：用户体验优化的6大策略
![Vue.js PDF分页加载：用户体验优化的6大策略]...通过实践应用章节，本文详细介绍了如何在Vue.js项目中实现分页加载步骤，并提供了常见问题的解决方案，同时讨论了分页加载的自定义与优化方法。高
力软新版APP上线,采用js语言,基于Vue.js和uni-app框架.pdf
03-09
技术栈上，除了uni-app和Vue.js，还包括JavaScript语言、CSS与LESS样式，使得开发者无须掌握原生Android的Java或iOS的Swift，以及小程序的特定开发语言，就能进行移动端开发。同时，移动端使用了第三方库，如uCharts...
手机端Swiper下拉刷新与上拉加载实现教程
原生JS的使用能够减小最终打包文件的大小，有助于提升页面加载速度，同时也利于开发者深入理解浏览器的DOM操作、事件监听等底层机制。 ### 知识点五：文件结构解析 - `index.html`：这个文件是项目的主要HTML页面...
2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）
datian45678的博客
06-22 1792
整理了一些前端面试题，希望对正在找前端工作的伙伴有用。本篇文章内容篇幅较大，主要针对初中级前端开发工程师。 篇幅过长，大家可以先点赞收藏以后慢慢看。 关于HTML 的title和alt属性有什么区别 alt：图片加载失败时，显示在网页上的替代文字 title：鼠标（手机端该属性无意义）放在图片上时显示的文字 alt是必需属性（但属性值可为空），title非必需 图片懒加载的原理 图像是img标记，浏览器根据图像的src属性请求图像，因此惰性加载的关键是当图像不在可视区域时，不给`imgs‘赋值。 懒加载
(手机移动web)iscroll+html5+css3+js实现下拉刷新上拉分页的功能
08-26
基于iscroll4和html5、css3实现的下拉刷新、上拉分页的demo，兼容pc、android、ios、wp等设备。解决了上拉分页footer存在bug的问题。 支持chrome、ff、opera、360浏览器、百度浏览器、qq浏览器等众多主流浏览器。
一个用vue实现的分页组件
08-10
一个用vue实现的分页组件
这是由Vue实现的分页插件
08-12
由Vue实现的分页插件(Paging plug-in implemented by Vue )
jquery手机端列表分页样式.zip
07-11
代码简介：jquery手机端列表分页样式是一款基于jquery实现的列表分页样式，支持手机端分页滚动效果代码。
基于vue的分页插件（含源码）
05-09
基于vue开发的分页插件，包含源码，可直接下载使用，也可参考学习
手机端分页
weixin_30619101的博客
06-18 1474
这个页面有二个分页，jq就用了个ajax其他都是用js写的， 原理：页面滚动时如果 页面滚动高度+屏幕高度>列表高度 加载下一页 有分页时列表高度前二个和还要大的。页面滚动高度+屏幕高度是因为手机端列表内容是第一页与之后的页面的叠加 <!DOCTYPE html> <html> <head> <meta charset="...
移动端网页使用Vue实现页面分页功能
每天学习一点点
11-09 4637
具体实现步骤： 1.为页面添加滚动监听事件 (在mounted钩子函数中添加监听事件)  mounted: function () {                 $(window).bind("scroll", this.Paging); //监听页面滚动  }, 2. 在methods选项中写分页方法 methods: {              Paging: fun...
移动端表格分页uni-app
weixin_59527403的博客
11-18 976
移动端表格分页uni-app
手机端滑动分页
m0_68331234的博客
02-20 488
页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑白两客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值