中国建设部网站办事大厅,德阳小程序开发,软件管理app,网易搜索引擎实现思路#xff1a;卡片移动使用css的translateY属性实现#xff0c;每个卡片从最下面移动到最上面#xff0c;然后直接移动到最下面#xff0c;每次改变的位移是固定的#xff0c;假设每次移动50px#xff0c;当移动到最小时#xff0c;就让translataY为0#xff0c;…实现思路卡片移动使用css的translateY属性实现每个卡片从最下面移动到最上面然后直接移动到最下面每次改变的位移是固定的假设每次移动50px当移动到最小时就让translataY为0但是一定要进行初始化每个div的初始位置
代码
templatediv iddemodiv classbox!-- 左下角预警 --divclasswarning:refsetItemRef:style{transform: translateY(${-index * 50}px),transition: transform 0.9s ease,zIndex: ${-index 100}}v-for(item, index) in warningInfoListdiv classwarning-title{{ item.warning_type }}/divdiv classwarning-content :style{display: index ! 0 ?none:block}div classwarning-time{{ item.time }}/divdiv classwarning-word{{ item.warning_content }}/div/div/div/div/div
/templatescript setup
import { reactive, ref, computed, onMounted, onUnmounted, nextTick } from vue// let warningInfoList ref([
// { warning_type: 台风, warning_content: 大风注意安全, time: 12日-13 },
// { warning_type: 暴雨, warning_content: 暴雨注意安全, time: 12日-13 },
// { warning_type: 冰雹, warning_content: 冰雹注意安全, time: 12日-13 }
// ])
import {warningInfo} from renderer/api/index.ts;
//预警数据
let warningInfoList ref([])
const getWarningInfo async () {let response await warningInfo({})warningInfoList.value response.data.ret.resultslet maxLength warningInfoList.value.lengthnextTick(() {setInterval(() {warningInfoList.value.forEach((item, index) {let aTransformY parseInt(itemRefs[index].style.transform.substring(11))let bIndex itemRefs[index].style.zIndex// console.log(aTransformY,aTransformY);if (aTransformY -((maxLength - 1) * 50)) {aTransformY 0itemRefs[index].children[1].style.display block} else {aTransformY - 50itemRefs[index].children[1].style.display none}if(bIndex (100 - maxLength1)){bIndex 100}else {bIndex - 1}itemRefs[index].style.transform translateY(${aTransformY}px)itemRefs[index].style.zIndex bIndex// console.log(itemRefs[index], itemRefs[index].style)})}, 3000)})
}const itemRefs []
const setItemRef (el) {if (el) {itemRefs.push(el)}
}
// console.log(itemRefs,itemRefs);
onMounted(async () {await getWarningInfo()//初始化// nextTick(() {// setInterval(() {// warningInfoList.value.forEach((item, index) {// let aTransformY parseInt(itemRefs[index].style.transform.substring(11))// let bIndex itemRefs[index].style.zIndex// console.log(aTransformY,aTransformY);// // debugger// if (aTransformY -((maxLength - 1) * 50)) {// aTransformY 0// itemRefs[index].children[1].style.display block// } else {// aTransformY - 50// itemRefs[index].children[1].style.display none// }// if(bIndex (100 - maxLength1)){// bIndex 100// }else {// bIndex - 1// }// itemRefs[index].style.transform translateY(${aTransformY}px)// itemRefs[index].style.zIndex bIndex// // console.log(itemRefs[index], itemRefs[index].style)// })// }, 3000)// })
})
/scriptstyle langless scoped
#demo {position: absolute;left: 40px;bottom: 30px;.box {width: 301px;height: 360px;// overflow: scroll;position: relative;.warning {width: 301px;height: 280px;position: absolute;.warning-title {height: 40px;background-image: url(../assets/img/title_bg.png);font-size: 18px;font-family:PingFang SC,PingFang SC-700;font-weight: 700;color: #ff6838;line-height: 40px;padding-left: 60px;}.warning-content {height: 240px;border-radius: 0px 0px 8px 8px;padding-top: 20px;box-sizing: border-box;background: rgba(255, 245, 209, 0.9); .warning-time {height: 30px;font-size: 20px;font-family:PingFang SC,PingFang SC-400;font-weight: 500;color: #009f80;line-height: 30px;padding-left: 20px;box-sizing: border-box;position: relative;::before {display: block;content: ;width: 3px;height: 3px;border-radius: 50%;background-color: #009f80;position: absolute;top: 50%;left: 3%;}}.warning-word {padding: 20px 30px;box-sizing: border-box;font-size: 20px;font-family:PingFang SC,PingFang SC-400;font-weight: 400;color: #313737;line-height: 30px;}}}}
}
/style如何没有接口可以使用里面的假数据先测试
