1.效果图
2.npm下载依赖及main.js文件配置
npm install vue3-seamless-scroll --saveimport vue3SeamlessScroll from 'vue3-seamless-scroll';app.use(vue3SeamlessScroll)
3.html代码
<!-- scrollFlag为true时再渲染,vue3只要涉及到传值子页面需要加flag判断，否则子页面出现获取不到值的情况 -->
<div class="right_img2"v-if="scrollFlag"><img src="../../public/img/fitth.png"alt=""srcset=""><ul class="right_box">//设置宽的目的为让内容居中显示<li style="width: 20%;">商户名称</li><li style="width: 20%;">品类</li><li style="width: 20%;">重量(kg)</li><li style="width: 20%;">金额(￥)</li><li style="width: 20%;">交易时间</li></ul><ul><!-- singleHeight：单步运动停止的高度 --><vue3-seamless-scroll class="v-s-s":list="scrollData":hover="true":singleHeight="32">//隔行变色<div class="v-s-s_item"v-for="(item, index) in scrollData":key="index":class="index % 2 === 0 ? 'even' : 'odd'">//设置宽的目的为让内容居中显示<div style="width: 20%;">{{ item.userName }}</div><div style="width: 20%;">{{ item.typeName }}</div><div style="width: 20%;">{{ item.totalWeight }}</div><div style="width: 20%;">{{ item.totalPrice }}</div><div style="width: 20%;">{{ item.createTime }}</div></div></vue3-seamless-scroll></ul></div>
4.script
const getScrollData = ()=>{dataScreenApi.getScrollData().then((res) =>{scrollFlag.value = truescrollData = res.data})}
5.css
滚动代码
.v-s-s {height: 350px;overflow: hidden;font-size: 13px;text-align: center;color: aliceblue;.v-s-s_item {// 让子元素垂直居中显示display: flex;align-items: center;justify-content: space-between;text-align: center;// 主轴方向从左往右排列在一行flex-direction: row;padding-bottom: 15px;}
}
//隔行变色
.even {// background-color: #66B3FF;color: #66b3ff;
}
