计算机应用技术网站开发,微信上如何创建小程序,微博上如何做网站推广,智能网站系统可以做app吗效果如图 1. 当表格内容超出时#xff0c;自动滚动#xff0c;滚动到最后一条之后在从头滚动。 2. 鼠标移入表格中#xff0c;停止滚动#xff1b;移出后#xff0c;继续滚动。 直接贴代码 templatedivdiv classapp-containere… 效果如图 1. 当表格内容超出时自动滚动滚动到最后一条之后在从头滚动。 2. 鼠标移入表格中停止滚动移出后继续滚动。 直接贴代码 templatedivdiv classapp-containerel-tablev-loadingloading:datatableData:max-height500refscroll_Tablemouseenter.nativeautoScroll(true)mouseleave.nativeautoScroll(false)/el-table/div/div
/templatescript
import mixins from ./mixins;
export default {data() {return {loading: false,tableData: [],scrolltimer: , // 自动滚动的定时任务}},mounted() {this.autoScroll()},beforeDestroy() {this.autoScroll(true)},methods: {// 设置自动滚动autoScroll(stop) {const table this.$refs.scroll_Table// 拿到表格中承载数据的div元素const divData table.$refs.bodyWrapper// 拿到元素后对元素进行定时增加距离顶部距离实现滚动效果(此配置为每100毫秒移动1像素)if (stop) {//再通过事件监听监听到 组件销毁 后再执行关闭计时器。window.clearInterval(this.scrolltimer)} else {this.scrolltimer window.setInterval(() {// 元素自增距离顶部1像素divData.scrollTop 1// 判断元素是否滚动到底部(可视高度距离顶部整个高度)if (divData.clientHeight divData.scrollTop divData.scrollHeight) {// 重置table距离顶部距离divData.scrollTop 0// 重置table距离顶部距离。值(滚动到底部时距离顶部的大小) - 整个高度/2// divData.scrollTop divData.scrollTop - divData.scrollHeight / 2}}, 150) // 滚动速度}},}
};
/script
