ShouBo/webM/src/views/Join/Volunteer.vue

<template>
  <v-touch
    class="JoinVo"
    @swipeleft="moveSwiper(1)"
    @swiperight="moveSwiper(0)"
  >
    <div
      @click="skip(item.id)"
      class="row"
      :class="{ active: index === imgInd }"
      v-for="(item, index) in imgList"
      :key="index"
    >
      <!-- <p>{{ item.name }}</p> -->
      <img
        :src="require(`@/assets/img/Join/${item.id}.png`)" alt=""
      />
    </div>
  </v-touch>
</template>

<script>
export default {
  name: "JoinVo",
  components: {},
  data() {
    //这里存放数据
    return {
      imgInd: 0,
      imgList: [
        { id: 1, name: "Volunteer Team Introduction" },
        { id: 2, name: "Volunteer Apply" },
        { id: 3, name: "Volunteer Program" },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    skip(id) {
      this.$router.push({
        name: "JoinInfo",
        query: { id },
      });
    },
    moveSwiper(val) {
      if (val === 1) {
        // +
        if (this.imgInd === this.imgList.length - 1) this.imgInd = 0;
        else this.imgInd++;
      } else {
        // -
        if (this.imgInd === 0) this.imgInd = this.imgList.length - 1;
        else this.imgInd--;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.JoinVo {
  touch-action: pan-y!important;
  padding: 20px 0 40px;
  background-color: #f7f6f3;
  .row {
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    width: 100%;
    opacity: 0;
    height: 0;
    &>img{
      width: 100%;
    }
  }
  .active {
    opacity: 1;
    height: auto;
  }
}
</style>