js如何实现移动端简易滑动表格

2024-10-26 技术教程

这篇文章主要介绍“js如何实现移动端简易滑动表格”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“js如何实现移动端简易滑动表格”文章能帮助大家解决问题。

上js文件代码

<template><view><scroll-viewscroll-x="true"class="scroll-table"><viewclass="scroll-tr"><viewclass="cus-trcus-th"><viewclass="cus-td"v-for="(item,i)inthList":key="i">{{item}}</view></view><viewv-if="!useCusTdList"><viewclass="cus-tr"v-for="(item,n)intdData":key="n"><viewclass="cus-td"v-for="(val,key,i)initem":key="i+n">{{val}}</view></view></view><viewv-if="useCusTdList"><viewclass="cus-tr"v-for="(item,n)intdData":key="n"><viewclass="cus-td"v-for="(tdName,i)intdList":key="i+n"><viewv-if="!slotData">{{item[tdName]}}</view><viewv-else><slotname="scoped":row="{value:item[tdName],key:tdName}"></slot></view></view></view></view></view><view></view></scroll-view></view></template><script>exportdefault{name:'CusTable',props:{thList:{type:Array,default:function(){return[]}},tdList:{type:Array,default:function(){return[]}},tdData:{type:Array,default:function(){return[]}},useCusTdList:{useCusTdList:Boolean,default:false},slotData:{//是否使用插槽useCusTdList:Boolean,default:false}},data(){return{}},methods:{}}</script><stylelang="scss">/*scroll-view样式*/.scroll-table{min-height:100rpx;white-space:nowrap;//padding:10rpx20rpx;//margin-top:30rpx;padding-bottom:60rpx;.scroll-tr{min-width:750rpx;display:inline-block;/*表头样式*/.cus-th{background-color:#f3f3f3;}/*行样式*/.cus-tr{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:center;height:100%;/*设置边框*/border-color:#ccc;border-style:solid;border-width:0;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;color:#333;+.cus-tr{border-top-style:none;}/*表格样式*/.cus-td{width:220rpx;box-sizing:border-box;padding:1px;font-size:25rpx;word-break:break-all;border-color:#ccc;border-style:solid;border-width:0;border-right-width:1px;min-height:60rpx;white-space:pre-wrap;word-wrap:break-word;/**/display:flex;justify-content:center;//左右居中align-items:center;//上下居中/*跨列*/&-colspan{flex-grow:1;width:0;}/*内容顶部对齐*/&-top{align-items:flex-start;align-content:flex-start;}/*内容底部对齐*/&-bottom{align-items:flex-end;align-content:flex-end;}/*内容左边对齐*/&-left{justify-content:flex-start;}/*内容右边对齐*/&-right{justify-content:flex-end;}}}}}</style>

使用方式

<tableS:thList="thList":tdList="tdList":tdData="tdData":useCusTdList="false"//控制是否更具对应字段赋值/>//或者使用插槽<tableS:thList="thList":tdList="tdList":tdData="dataList":useCusTdList="true":slotData="true"><templatev-slot:scoped="{row}"><viewv-if="row.key==='jiage'">-</view><viewv-else>{{row.value}}</view></template></tableS>thList:['姓名','年龄','性别','性别','性别'],//表头tdList:['name','age','sex'],//自定义属性名(要把useCusTdList变成true如果为false就是按数组顺序赋值)tdData:[{name:'张三',age:'18',sex:'男'}],

关于“js如何实现移动端简易滑动表格”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。