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

第js实现移动端简易滑动表格本文实例为大家分享了js实现移动端简易滑动表格的具体代码，供大家参考，具体内容如下

上js文件代码

template

view

scroll-viewscroll-x="true"

view

view

viewv-for="(item,i)inthList":key="i"{{

item

}}/view

/view

!--这里会自动遍历出对象数组中的数据--

viewv-if="!useCusTdList"

viewv-for="(item,n)intdData":key="n"

viewv-for="(val,key,i)initem":key="i+n"{{

val

}}/view

/view

/view

!--这里会使用tdList中定义的字段的数据--

viewv-if="useCusTdList"

viewv-for="(item,n)intdData":key="n"

viewv-for="(tdName,i)intdList":key="i+n"

viewv-if="!slotData"{{item[tdName]}}/view

viewv-else

slot

name="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-cont