微信小程序顶部tab页切换加手势滑动

maomaomao哇

已于 2022-11-21 10:59:12 修改

阅读量357

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序微信

于 2022-11-15 17:52:51 首次发布

本文链接：https://blog.csdn.net/weixin_65490785/article/details/127870498

版权

本文介绍如何在微信小程序中实现顶部tab页的手势滑动切换功能，包括wxml、wxss和js页面的配置与实现，提供了一个实际项目的简化案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxml页面

<view class="swiper-tab">
    <view class="swiper-tab-list {
  {currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">全部</view>
    <view class="swiper-tab-list {
  {currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">回收中</view>
    <view class="swiper-tab-list {
  {currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">确认订单</view>
    <view class="swiper-tab-list {
  {currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">提现订单</view>
</view>
 
<swiper current="{
  {currentTab}}" class="swiper-box" duration="300" style=