微信小程序左右拖动查看表格

<view class="contant contact">
  <view wx:for="{{obj.fieldValue}}" wx:key="index" wx:for-item="table">
    <scroll-view class="table" scroll-x>
      <view class="tab_top  layer_star">
        <view class="tab_title" wx:for="{{table.title}}" wx:key="index" wx:for-item="items">
          <text class="font30 blue">{{items}}</text>
        </view>
      </view>
      <view class="tab_box layer_star" wx:for="{{table.value}}" wx:key="index" wx:for-item="word">
        <view class="tab_word" wx:for="{{word}}" wx:key="index" wx:for-item="words" catchtap="{{words != null?'see_word':''}}" data-text="{{words}}">
          <text class="font28 gray" wx:if="{{words == null}}">/</text>
          <text class="font28 gray" wx:else>{{words}}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</view>
<!-- 查看表格未显示完全内容 -->
<view class="tx_mask" wx:if="{{word_show}}" bindtap="close">
  <view class="tx_contant" catchtap="no_show">
    <view class="tx_box font28">
      {{words}}
    </view>
  </view>
</view>

.contact {
  margin-top: 60rpx;
}

.table {
  width: 100%;
  white-space: nowrap;
  margin-bottom: 60rpx;
}

.tab_title,
.tab_word {
  min-width: 260rpx;
  border: 1rpx solid #999;
  padding: 20rpx 0;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab_title {
  border-right: none;
}

.tab_word {
  border-top: none;
  border-right: none;
}

.tab_title:last-child,
.tab_word:last-child {
  border-right: 1rpx solid #999;
}

/* 模态框 */
.tx_mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
}

.tx_contant {
  width: 100%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  z-index: 22;
}
.tx_contant {
  padding: 0 60rpx;
  box-sizing: border-box;
}

.tx_box {
  border-radius: 10rpx;
  text-align: center;
  color: #333;
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  background: #fff;
  line-height: 50rpx;
}

data: {
    //模拟后台数据
    obj: {
      sortNum: '5',
      disabled: '1',
      maxlength: null,
      fieldValue: [{
          title: ["工号", "姓名", "应发合计", "应出勤天数天数天", "基本工资", "应发基本工资", "绩效", "应发绩效", "全勤奖励", "工龄奖金", "补发", "加班", "请假", "其他扣款", "社保大额", "养老保险", "失业保险", "医疗", "实得工资", "入职日期", "备住"],
          value: [
            [
              null, 'null', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, '应发基本工资应发基本工资应发基本工资应发基本工资应发基本工资应发基本工资应发基本工资应发基本工资应发基本工资'
            ],
            [
              null, null, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19
            ]
          ]
        },

        {
          title: ["工号", "姓名", "应发合计", "应出勤天数", "基本工资", "应发基本工资", "绩效", "应发绩效", "全勤奖励", "工龄奖金", "补发", "加班", "请假", "其他扣款", "社保大额", "养老保险", "失业保险", "医疗", "实得工资", "入职日期", "备住"],
          value: [
            [
              null, null, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19
            ],
            [
              null, null, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19
            ]
          ]
        }
      ]
    },
    word_show: false,
    words: ""
  },
 see_word(e) {
    console.log(e)
    let t = this;
    t.setData({
      words: e.currentTarget.dataset.text,
      word_show: true
    });
  },
  close() {
    let t = this;
    t.setData({
      word_show: false
    });
  },