微信小程序实现tab和swiper切换结合效果viewpage+tab效果

最新推荐文章于 2026-05-13 05:13:36 发布

原创

最新推荐文章于 2026-05-13 05:13:36 发布 · 6.6k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何在微信小程序中结合Tab组件和Swiper组件，实现页面视图（ViewPage）的平滑切换效果。通过使用swiper.js，开发者可以创建动态的、交互式的Tab切换功能，提升用户体验。

swiper.js 代码

//index.js
//获取应用实例
var app = getApp();
var mtabW;
Page({
    data: {
        tabs: ["A", "B", "C", "D", "E"],//tob标题
        pageData: ["pageA", "pageB", "pageC", "pageD", "pageE"],//page数据
        activeIndex: 0,
        slideOffset: 0,
        tabW: 0,
        index:0,
        topView: 'A'
    },
    onLoad: function () {
        var that = this;
        wx.getSystemInfo({
            success: function (res) {
                mtabW = res.windowWidth / 3;  
                that.setData({
                    tabW: mtabW
                })
            }
        });

    },

    tabClick: function (e) {
        console.log(e)
        var that = this;
        var index = 0;
        for (var i = 0; i < this.data.tabs.l

标签

#微信小程序