5-1 使用swiper配合上选项卡切换视图

关注

VIP免费原创最新推荐文章于 2026-07-23 08:30:00 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

后台和小程序实现卡片式轮播图营销活动中，轮播图效果是比较常见的，基于轮播图拓展的组件也很多，这里记录一下使用swiper实现卡片式轮播的过程，分为PC端和小程序端，其中PC端是Vue+typescript，小程序端是uni-app。使用场景为管理后台配置相关参数实现预览效果，小程序根据配置实现相应效果。 vue卡片式轮播前期后台中使用了vue-awesome-swiper，安装依赖。 yarn add swiper vue-awesome-swiper # or npm install swiper vue-awesome-sw 阅读详情

如图：在日常开发中会碰到这种上选项卡切换的页面，（一般为1～4个选项卡切换，或者像新闻类app可滑动的选项卡）在这里编写那种指定个数的页面开发

.wxml

<view class="swiper-tab">
    <block wx:for="{
  
  {titlelist}}">
      <view class="swiper-tab-list {
  
  {currentTab==index ? 'on' : ''}}" data-current="{
  
  {index}}" bindtap="swichNav">{
  
  {item}}</view>
    </block>
</view>

.js

const app = getApp()

Page({
  data: {
    // tab标题
    titlelist: ["日报", "精选"],
    // tab切换
    currentTab: 0,
  },

//选项卡事件
  swichNav: function (e) {
    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
})

.wxss