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

作者：weixin_40725706 | 2024-07-14 15:46:36

踩

vant swiper 卡片模式

如图：在日常开发中会碰到这种上选项卡切换的页面，（一般为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: fun

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/825381