网站项目功能需求清单,wordpress谷歌字体去除,wordpress教程视频,有哪个网站可以查别人做没做过牢吗当我们在网页浏览时#xff0c;常常会有以下情况#xff1a;要展示的内容太多#xff0c;但展示空间有限#xff0c;比如我们要在页面的一部分空间中展示较多的内容放不下#xff0c;通常会有两种解决方式#xff1a;分页#xff0c;“更多”按钮。
今天我们的案例用于…当我们在网页浏览时常常会有以下情况要展示的内容太多但展示空间有限比如我们要在页面的一部分空间中展示较多的内容放不下通常会有两种解决方式分页“更多”按钮。
今天我们的案例用于更多按钮的功能实现。
比如我们要展示这样的效果 红框框是我们要展示的内容当我们点击更多时就会依次排列更多的红色框框。 比如我们有这样一些内容要展示
const newCourseList ref([{id:1,name:英特尔实时计算中级课程,type:,videoNum:10,studyNum:5946,imgUrl:src/assets/images/newcourse/newcourse1.png},{id:2,name:英特尔实时计算初级课程,type:,videoNum:10,studyNum:6682,imgUrl:src/assets/images/newcourse/newcourse2.png},{id:3,name:OpenCV高级认证课程,type:,videoNum:10,studyNum:8963,imgUrl:src/assets/images/newcourse/newcourse3.jpg},{id:4,name:OpenCV初级认证课程,type:,videoNum:10,studyNum:5869,imgUrl:src/assets/images/newcourse/newcourse4.jpg},{id:5,name:英特尔® OpenVINO™工具套件初级课程——2024焕新版,type:,videoNum:10,studyNum:5869,imgUrl:src/assets/images/newcourse/newcourse5.jpg},{id:6,name:英特尔® OpenVINO™工具套件中级课程,type:,videoNum:10,studyNum:5869,imgUrl:src/assets/images/newcourse/newcourse6.png},{id:7,name:英特尔® OpenVINO™工具套件高级课程,type:,videoNum:10,studyNum:5869,imgUrl:src/assets/images/newcourse/newcourse7.jpg},{id:8,name:英特尔® Smart Edge Open初级认证课程,type:,videoNum:10,studyNum:5869,imgUrl:src/assets/images/newcourse/newcourse8.png},{id:9,name:1,type:,videoNum:10,studyNum:5869,imgUrl:src/assets/images/newcourse/newcourse8.png},{id:10,name:2,type:,videoNum:10,studyNum:5869,imgUrl:src/assets/images/newcourse/newcourse8.png},{id:11,name:3,type:,videoNum:10,studyNum:5869,imgUrl:src/assets/images/newcourse/newcourse8.png},{id:12,name:4,type:,videoNum:10,studyNum:5869,imgUrl:src/assets/images/newcourse/newcourse8.png},{id:13,name:5,type:,videoNum:10,studyNum:5869,imgUrl:src/assets/images/newcourse/newcourse8.png},{id:14,name:6,type:,videoNum:10,studyNum:5869,imgUrl:src/assets/images/newcourse/newcourse8.png},{id:15,name:7,type:,videoNum:10,studyNum:5869,imgUrl:src/assets/images/newcourse/newcourse8.png},{id:16,name:8,type:,videoNum:10,studyNum:5869,imgUrl:src/assets/images/newcourse/newcourse8.png},
])
一共16条数据但是我们最初始要展示七条数据当单击一次更多按钮要展示13条数据。也就是每次单击都再展示6条数据。
首先我们要对布局分析我们可以将整个布局看成一行左边第一个元素独占一列。右边的其他元素可以占整体一个列然后再分行分列。这里我们用到elementui中的格子模式每行占24个格子。整体看每行有4个元素。比如第一个元素我们给6个格子。那么其他位置我们需要每行展示3个元素后边自己分一行就又是24个格子三个元素每个元素8个格子。
我们要确定前七条数据先怎么展示出来这里有个问题就是第一个框框的大小跟其他的不一样而且第一个一直就是那唯一的一个所以我们就不将第一个元素写在循环渲染内除了第一个其他都用循环写。
那么第一个元素我们可以这样写
el-row :span24 stylewidth: 1240px;margin: 0px auto; :gutter15el-col :span6 div styleheight: 530px;width: 100%;background-color: #fff;border-radius: 5px;margin-bottom:10px;RouterLink :to/course/coursecontent/${newCourseList[0].id}img stylewidth: 100%;height: 400px;border-radius: 5px 5px 0px 0px; v-img-lazynewCourseList[0].imgUrl alt /divdiv stylepadding: 20px; font-size: 16px;font-family: PingFangSC-Regular, sans-serif;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;{{ newCourseList[0].name }}/divdiv stylefont-size: 12px;margin-left: 20px; el-icon size20 styleposition:relative;top:5px;margin: 0 5px 0 0pxVideoCamera//el-iconspan{{newCourseList[0].videoNum}}/span/div/div/RouterLink/div/el-col
el-row
说明el-row是elementui中的行元素代表一个行el-col代表一个列:span后面是代表这个行/列占得格子数。
newCourseList的第一个元素也就是newCourseList[0]打点调用每条数据中的内容。上述代码就将第一个元素展示出来了。
其他元素我们就需要用到循环渲染了
因为第一个元素占了6个格子后面其他元素一起占一列那就是18个格子。内部再分行那么每行又是24个格子所以一个元素是8个格子。
el-col :span18el-row :span24el-col :span8 v-forcourse in newCourseList :keycourse.iddiv styleheight: 256px;width: 100%;background-color: #fff;border-radius: 5px;margin-bottom:10px;RouterLink :to/course/coursecontent/${course.id}img stylewidth: 100%;height: 160px;border-radius: 5px 5px 0px 0px; v-img-lazycourse.imgUrl alt /divdiv stylepadding: 20px; font-size: 16px;font-family: PingFangSC-Regular, sans-serif;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;{{ course.name }}/divdiv stylefont-size: 12px;margin-left: 20px; el-icon size20 styleposition:relative;top:5px;margin: 0 5px 0 0pxVideoCamera//el-iconspan{{course.videoNum}}/span/div/div/RouterLink/div/el-col/el-row/el-col
我们在内部列中使用了循环渲染这样实现了显示的功能但是有个问题这样写右侧不会只显示6个元素而是将所有数据展示出来。
为了解决这个问题我们可以建立一个新对象来装我们要展示的六条数据然后去循环展示这个新对象注意循环时是从第二条数据开始的因为第一条数据不参与循环。
创建对象
const listCopyref(newCourseList.value.slice(1,7))
上述代码我们创建了一个对象listCopy初始值用来装newCourseList的下标值为1-6的数据。
修改后的代码
el-col :span18el-row :span24el-col :span8 v-forcourse in listCopy :keycourse.iddiv styleheight: 256px;width: 100%;background-color: #fff;border-radius: 5px;margin-bottom:10px;RouterLink :to/course/coursecontent/${course.id}img stylewidth: 100%;height: 160px;border-radius: 5px 5px 0px 0px; v-img-lazycourse.imgUrl alt /divdiv stylepadding: 20px; font-size: 16px;font-family: PingFangSC-Regular, sans-serif;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;{{ course.name }}/divdiv stylefont-size: 12px;margin-left: 20px; el-icon size20 styleposition:relative;top:5px;margin: 0 5px 0 0pxVideoCamera//el-iconspan{{course.videoNum}}/span/div/div/RouterLink/div/el-col/el-row/el-col
接下来又有一个问题就是怎么在单击“更多”时多展示六条数据。
我们可以为“更多”设置一个单击事件然后触发一个函数修改被循环的对象listCopy的值。
el-row stylebackground-color:#f6f8fb; height: 150px; justifycenter alignmiddle typeflexdiv stylewidth:200px;background: transparent;border: 1px solid #999;color: #999;text-align: center;font-size: 12px;padding: 18px 75px;border-radius: 4px; clickchangeList()更多竞赛/div/el-row
我设置了名为changeList的函数。
接下来我们需要考虑两种情况
1、剩余数据大于6条2、剩余数据不足6条
第一种情况我们需要控制listCopy的数据只增加6条。
第二种情况剩余几条增加几条就可以。
函数内部代码
const changeList(){let countlistCopy.value.length1;let maxCountnewCourseList.value.length-1;let submaxCount-count6?6:maxCount-count;for(let i0;isub;i){listCopy.value.push(newCourseList.value[counti])}}
说明count变量用来装我们需要从newCourseList的哪个下标值开始增加给listCopy。maxCount用来装剩余数据的最大下标值。sub用来装我们要追加几条数据如果大于6sub就是6如果不大于6就是剩余数据的最大下标值减去从哪个下标值开始也就是还剩几条。
for循环就是对listCopy对象的数值进行追加。
例如第一次count的值为7也就是从id为8的数据开始追加给listCopy。maxCount值为15一共16条最大下标值为15。sub值为6因为maxCount-count15-78,86所以sub的值为6。那么for循环将执行6次。第一次向listCopy中pushnewCourseList下标值为7的数据第二次是newCourseList下标值为8的数据。
这样我们就实现了最初的功能。
页面效果
单击一次 单击两次
