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

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

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

html 复制代码
<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>

相关推荐
2501_916013741 小时前
iOS 26 设备文件管理实战指南,文件访问、沙盒导出、系统变更与 uni-app 项目适配
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_915921432 小时前
前端用什么开发工具?常用前端开发工具推荐与不同阶段的选择指南
android·前端·ios·小程序·uni-app·iphone·webview
2501_916007472 小时前
iOS 26 能耗检测实战指南,升级后电池掉速是否正常 + KeyMob + Instruments 实时监控 + 优化策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916013742 小时前
苹果上架 App 全流程详解,iOS 应用发布步骤、ipa 文件上传工具、TestFlight 测试与 App Store 审核经验
android·ios·小程序·https·uni-app·iphone·webview
2501_915909062 小时前
HTML 开发工具有哪些?常用 HTML 开发工具推荐、学习路线与实战经验分享
android·小程序·https·uni-app·iphone·webview
fionlsq15 小时前
uniapp集成原生安卓开发的插件
android·uni-app·小组件
奶糖 肥晨16 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
2501_9160074719 小时前
Java界面开发工具有哪些?常用Java GUI开发工具推荐、实战经验与对比分享
android·java·开发语言·ios·小程序·uni-app·iphone
chensi_0720 小时前
uniapp x 鸿蒙开发之调试证书签名配置
服务器·uni-app·harmonyos