html网页制作内容,网站做301对优化有影响,网页开发培训,网站的分类有哪些类型vue数据无限滚动 参考来源 Vue3 实现消息无限滚动的新思路 —— 林三心不学挖掘机 完整代码中项目中使用了vuetify#xff0c;估div内的class会代表了对应的样式#xff0c;根据需要自行删减。
功能实现主要依赖js代码部分。
鼠标悬浮停止滚动#xff0c;鼠标离开恢复滚动在… vue数据无限滚动 参考来源 Vue3 实现消息无限滚动的新思路 —— 林三心不学挖掘机 完整代码中项目中使用了vuetify估div内的class会代表了对应的样式根据需要自行删减。
功能实现主要依赖js代码部分。
鼠标悬浮停止滚动鼠标离开恢复滚动在最后区别就是将scroll方法从onMounted中提取出来了。vue3代码 templatediv classscroll-container refscrollRefdiv v-for(item, index) in list :keyindex styleheight: 40px; line-height: 40px;{{ item.title }}/div/div
/templatescript setup
import { onMounted, ref } from vue
defineOptions({name: publicRecruitment-bountyDisplay})// 容器的 dom 节点
const scrollRef ref()
// 模拟列表数据
const dataSource new Array(10).fill(0).map((_, index) ({title: 这是一条信息${index}
}))
const list ref([...dataSource])// 记录原始数据的长度
const len dataSource.length
onMounted(() {// 滚动的距离let top 0// 索引let index 0const scroll () {// 垂直方向滚动scrollRef.value?.scrollTo({top: top})if (top % 40 0) {// 哪一项滚不见了就拿这一项 push 到列表中const target list.value[index]if (target) list.value.push(target)if (index (len - 1)) {// 不断递增index} else {// 刚好滚动完一轮重新来过初始化数据top 0index 0scrollRef.value?.scrollTo({top: 0})list.value [...dataSource]}}// 不断滚动requestAnimationFrame(scroll)}scroll()
})
/scriptstyle langscss scoped
.scroll-container {// 防止有滚动条出现overflow: hidden;height: 150px;
}
/style兼容升级版本 1.如果数据长度形成的总高度少于容器高度不设置滚动 2.如果数据长度仅高于容器高度不足一个数据单位的长度会出现抖动滚动。解决方法将数据复制一份 删减代码!-- 滚动展示 --
templatediv styleheight: 100%; width: 100%;div classmb-3 stylefont-size: 13px; color: #666;无缝衔接滚动/div!-- 滚动 --divclassscroll-containerrefscrollRefstyleheight: calc(100% - 32px); overflow: hidden; font-size: 13px;color: #333;!-- 数据list --divv-for(item) in list:keyitem.nameclassd-flex justify-space-between align-center:styleheight: ${dataItemHeight}px;div classml-2{{ item.name }}/div/div/div/div
/templatescript setup
import { onMounted, ref } from vue
defineOptions({name: publicRecruitment-bountyDisplay})
// 滚动实现代码部分
const dataItemHeight 40
// 容器的 dom 节点
const scrollRef ref()
// // 模拟列表数据
let listSource new Array(10).fill(0).map((_, index) ({ name: name${index}}))
const list ref([...listSource])// 记录原始数据的长度
let len listSource.length
onMounted(() {// 滚动的距离let top 0// 索引let index 0const scroll () {// 垂直方向滚动scrollRef.value?.scrollTo({top: top,})if (top % dataItemHeight 0) {// 哪一项滚不见了就拿这一项 push 到列表中const target list.value[index]if (target) list.value.push(target)if (index len - 1) {// 不断递增index} else {// 刚好滚动完一轮重新来过初始化数据top 0index 0scrollRef.value?.scrollTo({top: 0,})list.value [...listSource]}}// 不断滚动requestAnimationFrame(scroll)}// 如果数据长度形成的总高度少于容器高度不设置滚动const clientHeight scrollRef.value?.clientHeightif (len*dataItemHeight clientHeight) {if ((len - 1)*dataItemHeight clientHeight) {// 如果clientHeight刚好大于len*dataItemHeight但不满足(len1)*dataItemHeight会出现抖动。// 解决方法将数据复制一份listSource listSource.concat(...Array.from({ length: 1 }, () [...listSource]))list.value listSourcelen listSource.length}scroll()}
})
/script
style langscss scoped
.red {color: red;
}
.ellipsisText {// width: 120px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
/style
完整代码!-- 滚动展示 --
templatediv styleheight: 100%; width: 100%;div classmb-3 stylefont-size: 13px; color: #666;最近30天已有span classred68人/span提现成功累计提现span classred9450/span/div!-- 滚动 --divclassscroll-containerrefscrollRefstyleheight: calc(100% - 32px); overflow: hidden; font-size: 13px;color: #333;!-- 数据list --divv-for(item) in list:keyitem[keyText] || item.nameclassd-flex justify-space-between align-center:styleheight: ${dataItemHeight}px;!-- 头像、用户名 --div classd-flex align-centerv-avatar size30 :imageitem.avatar || https://minio.citupro.com/dev/menduner/7.png/v-avatardiv classml-2{{ formatName(item.name) }}/div!-- div classml-2{{ item.name }}/div --/divdiv classd-flex stylewidth: calc(100% - 65px);!-- 内容 --div classd-flex ellipsisText mx-4 styleflex: 1;div推荐到/divdiv classellipsisText ml-1 stylemax-width: 100px;{{ item.company }}/divdiv classellipsisText ml-1 stylemax-width: 60px;{{ item.job }}/div/div!-- 赏金 --div提现span classred{{ item.money }}/span/div/div/div/div/div
/templatescript setup
import { onMounted, ref } from vuedefineOptions({name: publicRecruitment-bountyDisplay})
defineProps({keyText: {type: String,default: id}
})
const avatarList [https://img0.baidu.com/it/u230622178,1565949306fm253fmtautoapp138fJPEG?w449h300,https://img0.baidu.com/it/u1401084042,2724457850fm253fmtautoapp138fJPEG?w500h726,https://img1.baidu.com/it/u3995643348,1848098846fm253fmtautoapp138fJPEG?w800h800,https://img0.baidu.com/it/u230622178,1565949306fm253fmtautoapp138fJPEG?w449h300,https://img0.baidu.com/it/u1401084042,2724457850fm253fmtautoapp138fJPEG?w500h726,https://img1.baidu.com/it/u3995643348,1848098846fm253fmtautoapp138fJPEG?w800h800,https://img0.baidu.com/it/u230622178,1565949306fm253fmtautoapp138fJPEG?w449h300,
]
let listSource []
for (let index 0; index 68; index) {const obj {id: id (index1),name: 用户 (index1),// name: (index1),avatar: avatarList[index % 7],company: 某某公司 (index1),job: 某某职位 (index1),money: index*index*(100 - index) || 100,}listSource.push(obj)
}// 用户名加*号
const formatName (name) {if (!name.length) {return name} else if (name.length 1) { return name // 如果名字只有一个字则直接返回该字 } else if (name.length 2) { return name.charAt(0) * // 如果名字有两个字则返回第一个字后跟一个星号 } else { return name.charAt(0) ** // 如果名字有多于两个字则返回第一个字后跟两个星号 }
}// 滚动实现代码部分
const dataItemHeight 40
// 容器的 dom 节点
const scrollRef ref()
// // 模拟列表数据
// const listSource new Array(10).fill(0).map((_, index) ({ title: 这是一条信息${index}}))
const list ref([...listSource])// 记录原始数据的长度
let len listSource.length
onMounted(() {// 滚动的距离let top 0// 索引let index 0const scroll () {// 垂直方向滚动scrollRef.value?.scrollTo({top: top,})if (top % dataItemHeight 0) {// 哪一项滚不见了就拿这一项 push 到列表中const target list.value[index]if (target) list.value.push(target)if (index len - 1) {// 不断递增index} else {// 刚好滚动完一轮重新来过初始化数据top 0index 0scrollRef.value?.scrollTo({top: 0,})list.value [...listSource]}}// 不断滚动requestAnimationFrame(scroll)}// 如果数据长度形成的总高度少于容器高度不设置滚动const clientHeight scrollRef.value?.clientHeightif (len*dataItemHeight clientHeight) {if ((len - 1)*dataItemHeight clientHeight) {// 如果clientHeight刚好大于len*dataItemHeight但不满足(len1)*dataItemHeight会出现抖动。// 解决方法将数据复制一份listSource listSource.concat(...Array.from({ length: 1 }, () [...listSource]))list.value listSourcelen listSource.length}scroll()}
})
/script
style langscss scoped
.red {color: red;
}
.ellipsisText {// width: 120px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
/style
完整代码二鼠标悬浮停止滚动鼠标离开恢复滚动!-- 滚动展示 --
templatediv styleheight: 100%; width: 100%; mouseoverhandleMouseover mouseleavehandleMouseleavediv classmb-3 stylefont-size: 13px; color: #666;最近30天已有span classred68人/span提现成功累计提现span classred9450/span/div!-- 滚动 --divclassscroll-containerrefscrollRefstyleheight: calc(100% - 32px); overflow: hidden; font-size: 13px;color: #333;!-- 数据list --divv-for(item) in list:keyitem[keyText] || item.nameclassd-flex justify-space-between align-center:styleheight: ${dataItemHeight}px;!-- 头像、用户名 --div classd-flex align-centerv-avatar size30 :imageitem.avatar || https://minio.citupro.com/dev/menduner/7.png/v-avatardiv classml-2{{ formatName(item.name) }}/div/divdiv classd-flex stylewidth: calc(100% - 65px);!-- 内容 --div classd-flex ellipsisText mx-4 styleflex: 1;div推荐到/divdiv classellipsisText ml-1 stylemax-width: 100px;{{ item.company }}/divdiv classellipsisText ml-1 stylemax-width: 60px;{{ item.job }}/div/div!-- 赏金 --div提现span classred{{ item.money }}/span/div/div/div/div/div
/templatescript setup
import { onMounted, ref } from vuedefineOptions({name: publicRecruitment-bountyDisplay})
defineProps({keyText: {type: String,default: id}
})
const avatarList [https://img0.baidu.com/it/u230622178,1565949306fm253fmtautoapp138fJPEG?w449h300,https://img0.baidu.com/it/u1401084042,2724457850fm253fmtautoapp138fJPEG?w500h726,https://q7.itc.cn/q_70/images03/20240423/6d236fae5c8f44ed9b60d977f32debb7.jpeg,https://q1.itc.cn/q_70/images03/20240609/1c1be14298be4dbe978e55bde6e958b0.jpeg,https://q4.itc.cn/q_70/images03/20240528/298d4abda5e4469d98fa77e7cde46525.jpeg,https://q5.itc.cn/q_70/images03/20240520/ceb0d77d1be24eea8cd3826994eac1c1.jpeg,https://img1.baidu.com/it/u3995643348,1848098846fm253fmtautoapp138fJPEG?w800h800,
]
let listSource []
for (let index 0; index 68; index) {const obj {id: id (index1),name: 用户 (index1),avatar: avatarList[index % 7],company: 某某公司 (index1),job: 某某职位 (index1),money: index*index*(100 - index) || 100,}listSource.push(obj)
}// 用户名加*号
const formatName (name) {if (!name.length) {return name} else if (name.length 1) { return name // 如果名字只有一个字则直接返回该字 } else if (name.length 2) { return name.charAt(0) * // 如果名字有两个字则返回第一个字后跟一个星号 } else { return name.charAt(0) ** // 如果名字有多于两个字则返回第一个字后跟两个星号 }
}// 滚动实现代码部分
const dataItemHeight 40 // 单位高度
const scrollRef ref() // 容器的 dom 节点
const list ref([...listSource]) // 滚动数据列表
let len listSource.length // 记录原始数据的长度
const scrollItem ref(null)
let top 0 // 滚动的距离
let index 0 // 索引
const scroll () {// 垂直方向滚动scrollRef.value?.scrollTo({top: top,})if (top % dataItemHeight 0) {// 哪一项滚不见了就拿这一项 push 到列表中const target list.value[index]if (target) list.value.push(target)if (index len - 1) {// 不断递增index} else {// 刚好滚动完一轮重新来过初始化数据top 0index 0scrollRef.value?.scrollTo({top: 0,})list.value [...listSource]}}// 不断滚动scrollItem.value requestAnimationFrame(scroll)// setTimeout(() { scrollItem.value requestAnimationFrame(scroll) }, 20) // 延迟滚动- 20 : 1px。即:1秒滚动50px
}
const handleMouseover () { cancelAnimationFrame(scrollItem.value) } //暂停滚动
const handleMouseleave () { scroll() } // 恢复滚动
onMounted(() {// 如果数据长度形成的总高度少于容器高度不设置滚动const clientHeight scrollRef.value?.clientHeightif (len*dataItemHeight clientHeight) {if ((len - 1)*dataItemHeight clientHeight) {// 如果clientHeight刚好大于len*dataItemHeight但不满足(len1)*dataItemHeight会出现抖动。// 解决方法将数据复制一份listSource listSource.concat(...Array.from({ length: 1 }, () [...listSource]))list.value listSourcelen listSource.length}scroll() // 启动滚动}
})
/script
style langscss scoped
.red {color: red;
}
.ellipsisText {// width: 120px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
/style
