H5 禁止滑动、截取字符串、实现tableView的侧滑删除

最近滑动不能用，我学习到的处理方案。

解决：禁止左右滑动方案。

width:100%;
overflow: hidden;

关于filter用法。在utils文件夹中进行的操作。

Vue.filter('symbolSimpleName', function(symbol: string){
  return symbolSimpleName(symbol);
});

export const symbolSimpleName = (symbol: string): string => {
  if (!symbol) return symbol;
  return symbol.substring(1,symbol.length-3);
}

关于这个的使用

 <span style="margin-left:5px;font-size:14px">{{positionInfo.symbol | symbolSimpleName}}</span>

由于Vue是数据驱动特性，我们只需要把控好状态即可。
1、首先我们需要处理好数据源。
2、规划好每个item 显示规则

.allPositionItemsClass {
  display: flex;
  border-bottom: 10px solid var(--bg_main);
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
}

3、我们写每个item左边视图view。注意width:100%; overflow: hidden; 添加，这样就可以不会移动。

<div :class="showDeleteStatus[index] ? 'allPositionItem_left_showDelete': 'allPositionItem_left'" @click="showDeleteAction(index)">

.allPositionItem_left {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  background: red;
}

.allPositionItem_left_showDelete {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin-left: -70px;
}

4、设置右滑删除代码的dom设置

<div :class="showDeleteStatus[index] ? 'allPositionItem_right_showDelete':'allPositionItem_right'" @click="openShowProfit(positionInfo)">
              {{ $t("trade.closePosition") }}
</div>
.allPositionItem_right {
  display: flex;
  width: 70px;
  margin-right: -70px;
  background:#83A2F8;
  color: white;
  justify-content: center;
  align-items: center;
}

.allPositionItem_right_showDelete {
  display: flex;
  width: 70px;
  background: #83A2F8;
  justify-content: center;
  align-items: center;
  color: white;
}

5、整体调用规则

<div 
        v-show="!onlyShowCurretnt" 
        v-for="(positionInfo, index) in allPositionList"
        :key="'allposition'+index"
        class="allPositionItemsClass"
      > 

//此处正常展示item的内容
 <div :class="showDeleteStatus[index] ? 'allPositionItem_left_showDelete': 'allPositionItem_left'" @click="showDeleteAction(index)">  正常item显示  <div>

//此处滑动后展示 删除按钮
<div :class="showDeleteStatus[index] ? 'allPositionItem_right_showDelete':'allPositionItem_right'" @click="openShowProfit(positionInfo)">  删除  </div>

<div>