抓取网站访问量,哪个网站可以做危险化学品供求,网站技能培训班有哪些,电商网站建设规划切换效果 页面结构变化 1.需求背景
项目首页存有一个小的轮播模块,保密原因大概只能这么展示,左侧图片右侧文字,后端一次性返回几百条数据(开发环境下,生产环境只会更多).无法使用分页解决,前端需要懒加载防止页面卡顿 写个小demo演示,如下
2.解决思路
获取到数据后,取第一… 切换效果 页面结构变化 1.需求背景
项目首页存有一个小的轮播模块,保密原因大概只能这么展示,左侧图片右侧文字,后端一次性返回几百条数据(开发环境下,生产环境只会更多).无法使用分页解决,前端需要懒加载防止页面卡顿 写个小demo演示,如下
2.解决思路
获取到数据后,取第一条数据展示.切换时,这里以查看下一张为例演示.切换下一张时,动态创建一个dom元素,通过字符串的方式设置innerHtml,将下一张的dom元素插入父节点.
同时父元素的第一个子元素(初始展示第一条数据的dom元素)和新创建的展示下一条数据的dom元素同时向左偏移自身宽度,然后把切走的dom元素清除,实现切换效果,同时避免页面大量结构堆积
3.代码如下
仅做了’下一张’功能,其他请自行补充
templatediv classcontainerbutton clickgolast上一张/buttonbutton clickgonext下一张/buttondiv classwindowsdiv classscrollBoxdiv classscrollItemdiv classimgel-image :srcinitialData.imgUrl/el-image/divdiv classmessBox{{ initialData.mess }}/div/div/div/div/div
/template
script
export default {data () {return {localData: [{ imgUrl: ../assets/xxx.png, mess: 11111 },{ imgUrl: ../assets/xxx.png, mess: 22222 },{ imgUrl: ../assets/xxx.png, mess: 33333 },{ imgUrl: ../assets/xxx.png, mess: 44444 },{ imgUrl: ../assets/xxx.png, mess: 55555 },{ imgUrl: ../assets/xxx.png, mess: 66666 },],initialData: , // 初始展示数据nowIndex: 0// 当前展示数据的索引}},created () {},mounted () {this.initData()},computed: {},methods: {initData () {// 初始副职this.initialData this.localData[this.nowIndex]},// 点击查看上一张golast () {},// 点击查看下一张gonext () {if (this.localData.length this.nowIndex 1) returnthis.readyBox(next)const fatherDom document.querySelector(.windows)const moveDistanceX fatherDom.offsetWidthconst domArr fatherDom.querySelectorAll(.scrollBox)// 这里判断.初始结构和动态创建的元素的初始位置不同,导致偏移时的数值是不同的if (!domArr[0].classList.contains(newScrollBox)) {domArr[0].style.transform translate(-${moveDistanceX}px,0px)} else {domArr[0].style.transform translate(-${moveDistanceX * 2}px,0px)}domArr[1].style.transform translateX(-${moveDistanceX}px)this.nowIndex// 移除上一个dom元素const timeId1 setTimeout(() {fatherDom.removeChild(domArr[0])clearTimeout(timeId1)}, 501)},// 为下一次切换准备dom元素readyBox (type) {// 信息展示列表无数据或只有一条数据时,不执行if (this.localData.length 1) returnlet nextShowData // 上一张或下一张要展示的数据const fatherDom document.querySelector(.windows)// 获取父元素const newDom document.createElement(div)// 创建新元素// 设置新元素的样式newDom.className scrollBoxnewDom.classList.add(newScrollBox)newDom.style.width 100%newDom.style.height 100%newDom.style.position absolutenewDom.style.transition all 0.5s// 上一张if (type last) {// 判断当前展示列表是否合法if (this.nowIndex - 1 0) returnnextShowData this.localData[this.nowIndex - 1]//此处省略........,自行补充}// 下一张if (type next) {// 判断当前展示列表是否合法if (this.localData.length this.nowIndex 1) returnnextShowData this.localData[this.nowIndex 1]// 下一张的数据newDom.style.left 100%}// 新元素的内部结构const innerHtml div classscrollItem style display: flex; width: 100%; height: 100%; background-color: pink;div classimg stylewidth:50%; height:100% el-image src${nextShowData.imgUrl}/el-image/divdiv classmessBox style font-size: 16px; width:50%; height:100%; background-color: skyblue; ${nextShowData.mess}/div/div// 插入子元素newDom.innerHTML innerHtmlfatherDom.appendChild(newDom)}}
}
/script
style langscss scoped
.container {width: 100%;height: 100%;
}.container .windows {position: relative;left: 30%;font-size: 0px;overflow: hidden;width: 40%;height: 40%;border: 1px solid red;
}.scrollBox {position: absolute;width: 100%;height: 100%;transition: all 0.5s;
}.windows .scrollItem {display: flex;width: 100%;height: 100%;background-color: pink;
}.windows .scrollItem .img {width: 50%;height: 100%;
}.windows .messBox {font-size: 16px;width: 50%;height: 100%;background-color: skyblue;
}
/style
