How to realize simple sliding Table on Mobile end by js
This article mainly introduces the relevant knowledge of "how to realize the simple sliding table on the mobile side by js". The editor shows you the operation process through the actual case, the operation method is simple and fast, and the practicality is strong. I hope this article "how to realize the simple sliding table on the mobile side by js" can help you solve the problem.
Js file code on the
{{item}} {{val}} {{item [tdName]}} Export default {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: {/ / whether to use slots useCusTdList: Boolean, default: false}}, data () {return {}} Methods: {}} / * scroll-view style * / .scroll-table {min-height: 100rpx White-space: nowrap; / / padding: 10rpx 20rpx; / / margin-top: 30rpx; padding-bottom: 60rpx; .scroll-tr {min-width: 750rpx; display: inline-block; / * header style * / .cus-th {background-color: # f3f3f3;} / * Row style * / .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%; / * set the border * / 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;} / * Table style * / .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 / / left or right center align-items: center; / / up and down center / * across columns * / &-colspan {flex-grow: 1; width: 0;} / * content top alignment * / &-top {align-items: flex-start; align-content: flex-start } / * alignment at the bottom of the content * / &-bottom {align-items: flex-end; align-content: flex-end;} / * left alignment of the content * / &-left {justify-content: flex-start } / * alignment to the right of content * / &-right {justify-content: flex-end;}
Mode of use
/ / or use slot-{{row.value}} thList: ['name', 'age', 'gender'], / / header tdList: ['name',' age', 'sex'] / / Custom attribute name (to change useCusTdList to true, if false is assigned in array order) tdData: [{name: 'Zhang San', age:'18', sex: 'male'}], this is the end of the introduction on "how to implement a simple sliding table on mobile side by js". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
