前言

• 参考：
  https://blog.csdn.net/kormondor/article/details/79660218
• 实现左右滑动菜单，有点击关闭菜单效果，无点击打开菜单效果

<template>
    <div>
        <div class="address__container">
            <div class="address__item" ref="menuItem" v-for="(item,index) in list" @swipe="slideMenu($event,index)" :key="index" @click="chooseItem(index)">
                <div class="address__item__info">
                    <div class="addredd__item__info__top">
                        <text class="fs14 mr4">{{item.title}}</text>
                        <text class="fs14 mr4">{{item.sex}}</text>
                        <text class="fs16" style="height:50px;line-height:35px;">{{item.phone}}</text>
                    </div>
                    <div class="address__item__info__bottom">
                        <text class="fs12">{{item.location}}</text>
                    </div>
                </div>
                <div class="address__item__control_wrapper">
                    <div class="address__item__control">
                        <text class="address__item__control_text">{{item.control}}</text>
                    </div>
                    <div class="address__item__delete">
                        <text class="address__item__control_text">{{item.delete}}</text>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
const animation = weex.requireModule('animation')
export default {
  data() {
    return {
      open: false,
      list: [
        {
          title: '收货人',
          sex: 'xxx',
          phone: 'xxxxxxx',
          location: '某某省某某市某某区',
          control: '编辑',
          delete: '删除'
        },
        {
          title: '收货人',
          sex: 'xxx',
          phone: 'xxxxxxx',
          location: '某某省某某市某某区',
          control: '编辑',
          delete: '删除'
        },
        {
          title: '收货人',
          sex: 'xxx',
          phone: 'xxxxxxx',
          location: '某某省某某市某某区',
          control: '编辑',
          delete: '删除'
        },
        {
          title: '收货人',
          sex: 'xxx',
          phone: 'xxxxxxx',
          location: '某某省某某市某某区',
          control: '编辑',
          delete: '删除'
        }
      ]
    }
  },
  methods: {
    chooseItem(index) {
      this.$notice.toast({
        message: '点击的是' + index
      })
      if (this.open === true) {
        this.rightSlide()
      }
    },

    slideMenu(e, index) {
      let listItems = this.$refs.menuItem
      let ele = this.$refs.menuItem[index]
      let direction = e.direction
      if (direction == 'left') {
        this.leftSlide(ele)
      } else if (direction == 'right') {
        this.rightSlide(ele)
      }
    },
    leftSlide(ele) {
      this.rightSlide()
      animation.transition(ele, {
        styles: {
          transform: 'translateX(-300px)'
        },
        duration: 150, //ms
        timingFunction: 'linear',
        needLayout: false,
        delay: 0 //ms
      })
      this.open = true
    },
    rightSlide() {
      let listItems = this.$refs.menuItem
      for (let i = 0; i < listItems.length; i++) {
        animation.transition(listItems[i], {
          styles: {
            transform: 'translateX(0px)'
          },
          duration: 150, //ms
          timingFunction: 'linear',
          needLayout: false,
          delay: 0 //ms
        })
      }
      return false
    }
  }
}
</script>


<style scoped>
.address__container {
  /* width: 700px;
  height: 700px;
  border-width: 3px;
  border-style: solid;
  border-color: rgb(162, 217, 192);
  margin-left: 25px; */
}
.address__item {
  width: 1050px;
  height: 170px;
  border-bottom-width: 1px;
  border-bottom-color: #336a04;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.address__item__control_wrapper {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.address__item__control {
  width: 150px;
  height: 170px;
  align-items: center;
  justify-content: center;
  background-color: #00a040;
}
.address__item__delete {
  width: 150px;
  height: 170px;
  align-items: center;
  justify-content: center;
  background-color: red;
}
.address__item__control_text {
  color: aliceblue;
}
</style>

• 新增点击打开菜单效果

    chooseItem(index) {
      if (this.open === true) {
        this.rightSlide()
      } else {
        let listItems = this.$refs.menuItem
        let ele = this.$refs.menuItem[index]
        this.leftSlide(ele)
      }
    },

    slideMenu(e, index) {
      let listItems = this.$refs.menuItem
      let ele = this.$refs.menuItem[index]
      let direction = e.direction
      if (direction == 'left') {
        this.leftSlide(ele)
      } else if (direction == 'right') {
        this.rightSlide(ele)
      }
    },
    leftSlide(ele) {
      this.rightSlide()
      animation.transition(ele, {
        styles: {
          transform: 'translateX(-300px)'
        },
        duration: 150, //ms
        timingFunction: 'linear',
        needLayout: false,
        delay: 0 //ms
      })
      this.open = true
    },
    rightSlide() {
      let listItems = this.$refs.menuItem
      for (let i = 0; i < listItems.length; i++) {
        animation.transition(listItems[i], {
          styles: {
            transform: 'translateX(0px)'
          },
          duration: 150, //ms
          timingFunction: 'linear',
          needLayout: false,
          delay: 0 //ms
        })
      }
      this.open = false
      return false
    },