uniapp left right 的左右模态框

标题

这是组件

javascript 复制代码
<template>
    <div class="content-wrapper">
      <div
        v-for="(vla, i) in products"
        :key="i"
        :class="['content-page', getPageClass(i)]"
      >
        <slot :data="vla">
          <!-- 用户自定义的内容 -->
        </slot>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      products: {
        type: Array,
        required: true
      },
      selectedIndex: {
        type: Number,
        default: 0
      }
    },
    methods: {
      getPageClass(index) {
        if (index === this.selectedIndex) {
          return 'active';
        } else if (index < this.selectedIndex) {
          return 'left';
        } else {
          return 'right';
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .content-wrapper {
    position: relative;
    overflow: hidden;
    height: 300px; /* 根据需要调整高度 */
  }
  
  .content-page {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(100%);
    display: flex;
  }
  
  .content-page.active {
    opacity: 1;
    transform: translateX(0);
  }
  
  .content-page.left {
    transform: translateX(-100%);
  }
  
  .content-page.right {
    transform: translateX(100%);
  }
  </style>

demo 组件调用模拟

javascript 复制代码
<template>
    <div>
      <ProductSlider :products="products" :selectedIndex="selectedIndex">
        <template v-slot:default="{ data }">
          <div class="product-item">
            <h3>{{ data.name }}</h3>
            <p>{{ data.description }}</p>
          </div>
        </template>
      </ProductSlider>
      <button @click="prev">Previous</button>
      <button @click="next">Next</button>
    </div>
  </template>
  
  <script>
  import ProductSlider from './components/content-wrapper.vue'; // 假设组件名为 ProductSlider
  
  export default {
    components: {
      ProductSlider
    },
    data() {
      return {
        products: [
          { name: 'Product 1', description: 'Description 1' },
          { name: 'Product 2', description: 'Description 2' },
          { name: 'Product 3', description: 'Description 3' }
        ],
        selectedIndex: 0
      };
    },
    methods: {
      prev() {
        if (this.selectedIndex > 0) {
          this.selectedIndex--;
        }
      },
      next() {
        if (this.selectedIndex < this.products.length - 1) {
          this.selectedIndex++;
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .product-item {
    padding: 20px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  </style>
相关推荐
zwjapple13 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python
雪芽蓝域zzs4 小时前
uniapp 国密sm2加密
uni-app