van-swipe 自定义左右切换按钮

性野喜悲

已于 2024-01-30 16:26:29 修改

阅读量754

点赞数 9

分类专栏： vue 经验分享文章标签： javascript 前端 html vue.js

于 2024-01-30 16:25:25 首次发布

本文链接：https://blog.csdn.net/leng0920/article/details/135935749

版权

经验分享同时被 2 个专栏收录

149 篇文章 1 订阅

订阅专栏

vue

136 篇文章 4 订阅

订阅专栏

文章介绍了如何使用Vue.js中的van-swipe组件创建一个可自动切换的电子信息列表，展示了如何在模板中渲染数据和处理滑动事件。

摘要由CSDN通过智能技术生成

效果图：

代码：

<template>
  <div class="order-details-electronic-info">
    <div class="electronic-info-title-box flex-center-between">
      <div class="electronic-info-title">
        电子信息（<span>{{ current + 1 }}</span
        >/{{ attendeeInfoVOList && attendeeInfoVOList.length }}）
      </div>
      <div class="com-order-status-square flex-center blue-square">测试</div>
    </div>
    <div class="ticket-swiper-box flex-center-between">
      <div @click="changeSwiper(1)">上一页</div>

      <van-swipe
        ref="ticketSwiper"
        class="my-swipe"
        :autoplay="10000"
        indicator-color="#002FA1"
      >
        <van-swipe-item
          v-for="(item, index) in attendeeInfoVOList"
          :key="index"
        >
          <div class="ticket-swiper-cont flex-center-center">
            <div>{{ item.attendeeName }}</div>
          </div>
        </van-swipe-item>
      </van-swipe>
      <div @click="changeSwiper(2)">下一页</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    attendeeInfoVOList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      current: 0,
    };
  },
  computed: {},
  watch: {},
  methods: {
    changeSwiper(e) {
      if (e == 1) {
        this.$refs.ticketSwiper.prev();
      } else {
        this.$refs.ticketSwiper.next();
      }
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang='scss' scoped>
.order-details-electronic-info {
  padding: 0.84rem 0;
  .electronic-info-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: #333333;
    padding: 0 0 0 0.672rem;
    span {
      color: rgba(0, 47, 161, 1);
    }
  }
  .van-swipe {
    width: 7.2rem;
  }
  .ticket-swiper-box {
    padding: 1.44rem 0.48rem;
  }
  .ticket-swiper-cont {
    width: 7.2rem;
    height: 4.8rem;
    background: #f5f5f5;
  }
}
</style>