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>
相关推荐
dy171739 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_915106325 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip5 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go6 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x6 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java6 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5