轮播图 分页器 日历
1.滚动条初始化为0
2.分页器
3.放大镜
4.移动物体
5.拖拽
特别注意在vue2项目中,router里面也可以进行滚动条的设置,只不过top要修改成y才生效,只有vue3才是top。
滚动条
分页器
- 首先需要知道分页器的数据总数(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)
}