weex 添加长按longpress事件， ios真机无法触发左滑删除事件

Question

<scroller>
  <list>
    <refresh class="refresh_box" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">  
      <loading-indicator class="indicator"></loading-indicator>
    </refresh>
    <cell class="items_box" v-for="item in data" :key="item">
      <div @longpress="longpressData(item, $event)" @touchstart="gotouchstart(item)" @click="displayPatientsInfo(item.id)" class="group_name_box">
        <text>张三</text>
      </div>
      <div style="flex: 1;" v-if="item.checked">
        <div class="items_checkbox" v-for="(list, key) in patientData" :key="key">
          <div style="flex: 1;">
            <div class="item_childre_three" 
            style="width: 876px;"ref="itemDev" @swipe="handleSwipe($event, key)">
              <div class="member" style="width: 750px;">
                <div class="user_msgs">
                  <text class="user_name_sex_age">男</text>
                  <text class="user_times">时间：2019-09</text>
                </div>
              </div>
              <div class="remove_box" ref="remove">
                <div class="remove_grouping_box">
                  <text class="remove_attention">删除</text>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </cell>
  </list>
</scroller>
<script> 
    export default {
        data() {
            return {
                //记录当前左滑出来的条目下标
                currentIndex:-1,
            }
        },
        methods: {
            longpressData (item, e) {
              console.log(item, '长按')
            },
            gotouchstart(item){ 
            },
            handleSwipe (e , index) {
              console.log(index, 'index')
              console.log(e, 'e')
              if (e.direction == "left") {
                this.goLeft(index);
              } else if (e.direction == "right"){
                this.goRight(index);
              }
              // modal.toast({message:"==" + e.direction + "==" + index, duration:1});
            },
            goLeft(index){
              this.leftIndex = index
              let itemEl = this.$refs.itemDev[index];
              //第二左滑条目与前一次左滑条目相同时，不处理
              if (index == this.currentIndex){
                return;
              }
              //当前有划出的条目的时候，左滑其他条目，当前的条目归位，
              if (this.currentIndex != -1){
                this.goRight(this.currentIndex);
              }
              let wd = this.$refs.remove[index].offsetWidth + 30;
              console.log(wd, 'width')
              //左滑当前条目
              if (this.currentIndex != index){
                animation.transition(itemEl,{
                  styles: {
                    transform: `translate(-${wd}px, 0px)`,
                    transformOrigin: 'center center'
                  },
                  duration: 200, //ms
                  timingFunction: 'linear',
                  delay: 0 //ms
                },function () {

                });
                this.currentIndex = index;
              }
            },
            //time是动画时间，给个默认值 200毫秒，不传就表明这个值为200毫秒
            goRight(index, time = 200){
              let itemEl = this.$refs.itemDev[index];
              animation.transition(itemEl,{
                styles: {
                transform: 'translate(0px, 0px)',
                transformOrigin: 'center center'
                },
                duration: time, //动画时间
                timingFunction: 'linear',//线性运动
                delay: 0 //ms
              },function () {

              });
              this.currentIndex = -1;
            }
        }
    }
</script>

如何才可以触发相应的事件？ 求指教

Answer 1

应该是代码本身的问题吧,我用weexplayground以及weexAppIos测试了一下并没有出现这个问题。 看一下是否是因为swipe的元素没有宽高导致的问题

测试代码

<template>
  <div @longpress="changeColor" class="root" :style="{ backgroundColor: activityColor}">
    <div class="block" @swipe="handleSwipe">
      <text class="info">{{info}}</text>
    </div>
  </div>
</template>

<script>
const defaultInfo = 'please swipe inside the block';
export default {
  data() {
    return {
      info: defaultInfo,
      activityColor: 'blue',
    };
  },
  methods: {
    handleSwipe(e) {
      this.info = e.direction;
    },
    changeColor() {
      this.activityColor = this.activityColor === 'blue' ? 'red' : 'blue';
    },
  },
};
</script>


<style scoped>
.root {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}
.block {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  height: 800px;
  width: 710px;
}
.info {
  font-size: 50px;
  color: #fff;
}
</style>

Answer 2

styles: {
transform: `translate(-${wd}px, 0px)`,
transformOrigin: 'center center'
 },

translate值 必须是固定的值