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

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

上js文件代码

<template>  <view>    <scroll-view scroll-x="true" class="scroll-table">      <view class="scroll-tr">        <view class="cus-tr cus-th" >          <view class="cus-td" v-for="(item, i) in thList" :key="i">{{            item          }}</view>        </view>        <!-- 这里会自动遍历出对象数组中的数据 -->        <view v-if="!useCusTdList">          <view class="cus-tr" v-for="(item, n) in tdData" :key="n">            <view class="cus-td" v-for="(val, key, i) in item" :key="i + n">{{              val            }}</view>          </view>        </view>        <!-- 这里会使用tdList中定义的字段的数据 -->        <view v-if="useCusTdList">          <view class="cus-tr" v-for="(item, n) in tdData" :key="n">            <view class="cus-td" v-for="(tdName, i) in tdList" :key="i + n">              <view v-if="!slotData">{{ item[tdName] }}</view>              <view v-else>                <slot                  name="scoped"                  :row="{ value: item[tdName], key: tdName }"                ></slot>              </view>            </view>          </view>        </view>      </view>      <!-- 撑开空间，防止最后一行的下边框无法显示 -->      <view ></view>    </scroll-view>  </view></template><script>  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: { //是否使用插槽        useCusTdList: Boolean,        default: false      }    },    data() {      return {}    },    methods: {}  }</script><style lang="scss">    .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;            .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"     >       <!-- 加插槽 -->       <template v-slot:scoped="{ row }">         <view v-if="row.key === 'jiage'">-</view>         <view v-else>{{ row.value }}</view>       </template>     </tableS>   thList: ['姓名', '年龄', '性别', '性别', '性别'], //表头 tdList: ['name', 'age', 'sex'], //自定义属性名(要把useCusTdList变成true 如果为false  就是按数组顺序赋值) tdData: [{ name: '张三', age: '18', sex: '男' }],

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