原生组件的写法

轮播图 分页器 日历
1.滚动条初始化为0
2.分页器
3.放大镜
4.移动物体
5.拖拽

特别注意在vue2项目中,router里面也可以进行滚动条的设置,只不过top要修改成y才生效,只有vue3才是top。

滚动条

```javascript const speed = 20 const timer = setInterval(() => { //获得滚动高度 document.documentElement.scrollTop -= speed if (document.documentElement.scrollTop === 0) { clearInterval(timer) } }, 16) ```

分页器

## 分页器 `如果一口气从后台请求到了10000条数据的话,加载会很慢,而且还会影响用户体验,这时候可以考虑分页器。`
  1. 首先需要知道分页器的数据总数(total),当前处于的页数(pageNo),每一页的数据总数(pageSize),分页连续页码个数(continues)。
//currentPage:当前页数
//nextPages:下一页
//everyPages:每一页的数据数
//totalPages:数据总数
//continuePages:连续数
//changeCurrentPages:点击按钮进行跳转
//beforePages:上一页
<gogo :currentPage="currentPage" @nextPages="nextValue" :everyPages="3" :totalPages="60" :continuePages="5" @changeCurrentPages="changeValue" @beforePages="beforeValue" />
//原生分页器组件
<!-- 需要获得4种数据,每页的数据量,当前的页数是,数据的总数,连续的个数(也就是除去前后,中间的数据通常是5或者7) -->
<template>
  <div class="page_container">
    <button class="pageNext" @click="$emit('nextPages',currentPage+1)" :disabled="currentPage===20">下一页</button>
    <!-- 这两个不是特别明白 -->
    <button class="pageNumber" v-show="getStartIndexAndEndIndex.start>=2">1</button>
    <button class="pageNumber" v-show="getStartIndexAndEndIndex.start>=3">...</button>
    <!-- 点击把当前的页数传到外面去 -->
    <button
      :class="{ pageNumber: true, active: item === currentPage }"
      v-for="(item, index) in getStartIndexAndEndIndex.end"
      :key="index"
      v-show="item >= getStartIndexAndEndIndex.start"
      @click="$emit('changeCurrentPages',item)"
    >
      {{ item }}
    </button>
    <button class="pageNumber" v-show="getStartIndexAndEndIndex.end< countPages-1">...</button>
    <button class="pageNumber" v-show="getStartIndexAndEndIndex.end<countPages">{{ countPages }}</button>
    <button class="pageNext" @click="$emit('beforePages',currentPage-1)" :disabled="currentPage===1">上一页</button>
    <button class="pageTotal">{{ totalPages }}</button>
  </div>
</template>

<script>
export default {
  // 获得父组件给予的数据
  props: ['currentPage', 'everyPages', 'totalPages', 'continuePages'],
  computed: {
    // 求得共有的页数
    countPages () {
      // 向上取整,如果有余数直接进1
      return Math.ceil(this.totalPages / this.everyPages)
    },
    // 处理连续个数所存在的首索引和末索引
    getStartIndexAndEndIndex () {
      let start = 0
      let end = 0
      if (this.countPages < this.continuePages) {
        // 比如1,2,3,4,但是连续的数目是5的话,那么头和尾也就是1和4(当前总共的页数)
        start = 1
        end = this.countPages
      } else {
        // 比如是5的话,这样的话就是前后都是2,如果是7的话,这样的话就是前后都是3
        start = this.currentPage - Math.floor(this.continuePages / 2)
        end = this.currentPage + Math.floor(this.continuePages / 2)
        if (start < 1) {
          // 1 2 3 4 5
          start = 1
          end = this.continuePages
        }
        if (end > this.countPages) {
          // 16 17 18 19 20
          end = this.countPages
          start = this.countPages - this.continuePages
        }
      }
      return { start, end }
    }
  }
}
</script>

<style lang="less" scoped>
.page_container {
  width: 600px;
  height: 30px;
  display: flex;
  justify-content: space-around;
  .pageNext {
    width: 60px;
    height: 20px;
    background-color: #7d7d7d;
  }
  button {
    border: none;
  }
  .pageNumber {
    width: 30px;
    height: 20px;
    text-align: center;
    background-color: #7d7d7d;
    &.active {
      background-color: red;
      color: lightblue;
      cursor: not-allowed;
    }
  }
  .pageTotal {
    width: 72px;
    height: 20px;
    background-color: #7d7d7d;
  }
}
</style>

放大镜

也没怎么搞明白,网上抄的

   .box {
            position: relative;
            width: 960px;
            height: 600px;
        }
 
        .yy {
            position: absolute;
            top: 0;
            left: 0;
            width: 250px;
            height: 250px;
            background-color: yellow;
            opacity: 0.5;
            border: 1px solid #333;
            display: none;
        }
 
        .big {
            position: absolute;
            left: 1100px;
            top: 0px;
            width: 500px;
            height: 500px;
            overflow: hidden;
            display: none;
        }
 
        .big>img {
            position: absolute;
            top: 0;
            left: 0;
        }
  <!-- 大盒子 -->
  <div class="box">
    <!-- 图片区域 -->
    <img src="./ChMkJ1cEanGIE8okAH0T-UJ3Jj0AAPUoQNstTIAfRQR935.jpg" alt="" class="small">
    <!-- 遮罩层 -->
    <div class="yy"></div>
    <!-- 图片放大区域 -->
    <div class="big">
        <img src="./ChMkJ1cEanGIE8okAH0T-UJ3Jj0AAPUoQNstTIAfRQR935.jpg" alt="">
    </div>
  window.addEventListener('load', function () {
            var box = document.querySelector('.box');
            var yy = document.querySelector('.yy');
            var big = document.querySelector('.big');
            //控制遮罩层显示还是隐藏
            box.addEventListener('mouseover', function () {
                yy.style.display = 'block';
                big.style.display = 'block';
            })
            box.addEventListener('mouseout', function () {
                yy.style.display = 'none';
                big.style.display = 'none';
            })
            box.addEventListener('mousemove', function (e) {
                var x = e.pageX - box.offsetLeft;
                var y = e.pageY - box.offsetTop;
                var width = x - yy.offsetWidth / 2;
                var height = y - yy.offsetHeight / 2;
                if (width <= 0) {
                    width = 0;
                } else if (width >= box.offsetWidth - yy.offsetWidth) {
                    width = box.offsetWidth - yy.offsetWidth;
                }
                if (height <= 0) {
                    height = 0;
                } else if (height >= box.offsetHeight - yy.offsetHeight) {
                    height = box.offsetHeight - yy.offsetHeight;
                }
                yy.style.left = width + 'px';
                yy.style.top = height + 'px';
                var bigimg = document.querySelector('.big>img');
                // 大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离
                var bigx = width * (bigimg.offsetWidth - big.offsetWidth) / (box.offsetWidth - yy.offsetWidth);
                var bigy = height * (bigimg.offsetHeight - big.offsetHeight) / (box.offsetHeight - yy.offsetHeight);
                bigimg.style.left = -bigx + 'px';
                bigimg.style.top = -bigy + 'px';
            })
        })

物体移动

1.对象
<div class="fancy" id="box1"></div>

2.js操作
const box = document.querySelector('#box1')
  const left = box.offsetWidth
  const top1 = box.offsetHeight
  
  let xixi = function(e){
      box.style.left = e.clientX -left/2 + 'px'
      box.style.top = e.clientY -top1/2 + 'px'
  }
  box.addEventListener('mousedown',function(e){
    e.preventDefault()
    xixi = function(e){
      box.style.left = e.clientX -left/2 + 'px'
      box.style.top = e.clientY -top1/2 + 'px'
  }
   box.addEventListener('mousemove',function(event){
      xixi(event)
    })
  })
  box.addEventListener('mouseup',function(){
    box.removeEventListener('mousemove',xixi)
    xixi = function(){}
  })

拖拽

//对象
<div class="nancy"  ondrop="startDrag(event)" ondragover="allowDrag(event)">
  <p ondragstart="getDrag(event)" ondrag="change(event)" id="box" draggable="true">123</p>
  </div>
  <div class="fancy"  ondrop="startDrag(event)" ondragover="allowDrag(event)"></div>
//js
1.允许物体可以存放东西
function allowDrag(e){
    e.preventDefault()
  }
  function getDrag(event){
  2.可以转移
    event.dataTransfer.setData("Text", event.target.id);
  }
  function startDrag(e){
    e.preventDefault()
    var data = e.dataTransfer.getData("Text");
    e.target.appendChild(document.getElementById(data));
  }
  function change(event){
    console.log(1)
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值