当前位置: 首页 > article >正文

uniapp实现页面左滑右滑切换内容


uniapp + uview:使用uniapp的swiper和uview的tabs标签组合实现

Tabs 标签 - uview-plus 3.0 - uni-app UI框架

<template>
    <view class="main">
        <view class="">
            <u-tabs :list="state.list" :current='state.current' @click="clickTab"></u-tabs>
        </view>
        <swiper :current='state.current' class="swiper-box" @change="swiperChange" :skip-hidden-item-layout='true'
            :duration='300'>
            <swiper-item v-for="item in state.list">
                <view>
                    {{item.name}}
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup>
    import {
        onMounted,
        onUnmounted,
        ref,
        reactive,
        computed,
        markRaw,
        getCurrentInstance,
        nextTick
    } from "vue";
    import {
        formatDateByDate,
        Toast
    } from "@/utils/utils.js";
    import store from "@/store/index.js";
    import {
        onPullDownRefresh,
        onReachBottom,
        onShow,
        onLoad
    } from "@dcloudio/uni-app";

    const {
        proxy
    } = getCurrentInstance();
    const state = reactive({
        list: [{
            name: '全部',
            id: ''
        },{
            name: '组筹备阶段',
            id: '1'
        },{
            name: '准备阶段',
            id: '2'
        },{
            name: '实施阶段',
            id: '3'
        },{
            name: '收尾阶段',
            id: '4'
        },],
        current: 0,
    });
    
    // tab切换
    const clickTab = (e) => {
        state.current = e.index
    }


    // 页面滑动
    const swiperChange = (e) => {
        state.current = e.detail.current
    }

</script>

<style scoped lang="less">
    .main {
        height: 100%;
        background: #EFF4FB;
        box-sizing: border-box;
        overflow: hidden;
        
        .swiper-box {
            height: calc(100vh - 224rpx);
            padding: 24rpx 24rpx;
            box-sizing: border-box;
        }

    }

</style>

在这里插入图片描述


http://www.kler.cn/a/590292.html

相关文章:

  • 【万字总结】构建现代Web应用的全方位性能优化体系学习指南(二)
  • UART转AHB总线接口参考设计介绍
  • CSS3学习教程,从入门到精通,CSS3 属性语法知识点及案例代码(4)
  • 学生选课管理系统数据库设计报告
  • C++学习笔记(二十一)——文件读写
  • 4.JVM-垃圾回收介绍
  • k8s环境部署
  • Kubernetes集群版本升级
  • 【开源免费】基于SpringBoot+Vue.JS失物招领平台(JAVA毕业设计)
  • vlc录制的视频伪时长修复方法
  • Python中存储数据——json模块
  • JVM常用概念之堆未提交
  • ios app第一次上架遇到的审核问题
  • Kotlin 中 let 方法的作用和使用场景
  • MATLAB 控制系统设计与仿真 - 27
  • 【机器人-基础知识】标定 - 相机标定全解
  • 【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit(6)
  • json字符串转对象,对象转JSON
  • c++基础知识-图论进阶
  • ArcGIS10.X影像智能下载!迁移ArcGIS Pro批量智能高清影像下载工具至ArcGIS!