产品需求: 普通的大框里面放不定的小框，两行排列，左右翻页
- 思想： position: relative; left: xx;
- 确定的参数：
- 外框的宽高：展示给用户看到的界面
- 内框的宽高：放所有数据的容器
- 展示的数据：
- 每一页展示的最大个数 = Math.floor((大框的宽 - padding) / (小框的宽+小框padding)) * 列数
- 总页数 = Math.ceil(总数据 / 每一页最大个数)
- 最后一页数据 = 总数据 % 总页数（分有无余数）
- 其他普通页的数据 = Math.floor((总数据 - 最后一页的数据) / (总页数 - 1))
- 其他：上一页，下一页，到顶显示不能点击
- Vue.js框架
- template页面
// JcontainerDomWidth 大屏的宽度 JcontainerDomLeft 相对定位left
<div class="work-container" id="JContainer" :style="{width: JcontainerDomWidth, left: JcontainerDomLeft}">
<!-- 设想这是一屏的值 -->
// pageScroll 总数据
<ul class="box" :style="{width: boxWidth}" v-for="i in pageScroll" :key="i">
// workTeamFilter(i) 根据index值筛选应该在本页显示的数据
<li class="block" v-for="(itemChild, index) in workTeamFilter(i)" :key="index"
@click="workTeamChange(i, index)" :class="{active: boxSelected === (i-1)*currentPageNumber+index}">
// 点击选中高亮
// 包含的业务代码
<img :src="itemChild.headPortraits" alt="" class="left">
<div class="right">
<p class="row-01">xxx：<span class="index-num">{{itemChild.exponent}}</span> </p>
<p class="row-02">{{itemChild.name}}</p>
<p class="row-03"><span class="state">当前状态</span> <span class="next" v-if="itemChild.subordinate" @click="nextLevelClick(itemChild.workstationId)">下一级</span></p>
</div>
</li>
</ul>
</div>
- 展示数据
pageNumber () {
let fixedWidth = document.getElementById('Jcontractor')
// 计算： Math.ceil(数组个数 / (可视窗口/250+padding左右 * 2行))
let ramainder
let page
let number
let length = this.formInstallTab.workTeam.length
let imageNumber = Math.floor((fixedWidth.clientWidth-this.padding)/(250+this.padding))*2
if(fixedWidth) {
ramainder = Math.ceil(length%imageNumber) // 余数 就是最后一页的个数
page = Math.ceil(length/imageNumber) // 总页数
}
this.pageScroll = page
// 有余数的情况
if (page > 1 && ramainder === 0) {
number = Math.floor((length) / page)
ramainder = number
} else if (length > ramainder) {
number = Math.floor((length - ramainder) / (page - 1)) // 其他页数的个数
} else {
// 当只有一页时
number = 1
}
return [ramainder, page, number]
},
- 根据窗口大小动态变化
watch: {
// 业务中的折叠
obj () {
// 点击折叠面板时的重新计算
this.initScroll()
},
currentPos (val) {
// 左右页面的禁用
this.btnDisable()
}
},
- 根据个数筛选
workTeamFilter (i) {
let [ramainder, page, number] = this.pageNumber()
let arr = this.formInstallTab.workTeam.filter((item, index) => {
// 最后一页
if (i === page) {
return index >= number * (page - 1)
} else { // 其他页正常的个数
let ifgt = index < i * number
let iflt = index >= (i - 1) * number
return ifgt && iflt
}
})
console.log([ramainder, page, number], '[ramainder, page, number]')
console.log(arr, 'arr')
return arr
},
- 其他
prevClick () {
let fixedWidth = document.getElementById('Jcontractor').clientWidth
let prevBtnDom = document.getElementsByClassName('prev-btn')[0]
console.log(this.currentPos, 'currentPos')
if (this.currentPos <= 0) {
return
} else {
this.currentPos-=1
this.JcontainerDomLeft = -fixedWidth * this.currentPos + 'px'
}
},
btnDisable () {
let boxDom = document.getElementsByClassName('box')
this.currentPos > 0 ? (this.prevDisabled = false) : (this.prevDisabled = true)
this.currentPos < this.pageScroll - 1 ? (this.nextDisabled = false) : (this.nextDisabled = true)
this.showPageNumber()
},
