这篇文章给大家介绍了“微信小程序中的tab滑动切换效果如何做，代码是什么”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

自定义tab切换（可滑动）

<!--components/warn/warn.wxml-->
<view class="menu">
  <navigator wx:for="{{shouye}}" wx:key="index" bindtap="change" class="{{page==index?'font-white':'font-black'}}" data-pageid="{{index}}">{{item}}</navigator>
  <!-- <view class="order-desc">按排名升序</view> -->
</view>
<swiper current='{{page}}' bindchange="changepage">
  <swiper-item wx:for="{{shouye}}" wx:key="index">
    <view class="view1">
      <view class="table">
        <view class="tr">
          <view class="th">产品编号</view>
          <view class="th">当前库存</view>
          <view class="th">按时间倒序</view>
        </view>
        <block wx:for="{{saleData}}" wx:key="index">
          <view class="tr bg-f3f4f4">
            <view class="td">{{item.prodCode}}</view>
            <view class="td">{{item.proName}}</view>
            <view class="td">{{item.time}}</view>
          </view>
        </block>
        <view class="all-tabledata">查看全部</view>
      </view>
    </view>
  </swiper-item>
</swiper>

// components/warn/warn.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        shouye: ['未处理', '已处理'],
        page: 0,
        saleData:[
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          },
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          },
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          },
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          },
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          },
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          },
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          },
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          },
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          },
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          },
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          },
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          },
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          },
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          },
          {
              prodCode:38749237093280,
              proName:'1000',
              time:'2021-12-12 14:00'
          }
      ]
      },

    /**
     * 组件的方法列表
     */
    methods: {
        change: function (event) {
            var a = event.currentTarget.dataset.pageid
            this.setData({
              page: a
            })
          },
          changepage: function (event) {
            console.log(event)
            var a = event.detail.current
            this.setData({
              page: a
            })
          },
    }
})

/* components/warn/warn.wxss */

scroll-view{
    width: 100%;
    height: 100%;
    display: flex;
  }
  .menu{
    /* background-color: red;
    display: flex;
    height: 60rpx;
    font-size: 40rpx;
    line-height: 70rpx;
    flex-direction: row;
    justify-content: space-around; */
    width: 100%;
    height: 10%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .font-white{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #FFFFFF;
    background: #197FF0;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    width: 200rpx;
    height: 60rpx;
    line-height: 60rpx;
    opacity: 1;
    border-radius: 34rpx;
  }
  .font-black{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #041320;
    width: 200rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: #F6F6F6;
    opacity: 1;
    border-radius: 34rpx;
  }
  .view1{
    height: 100%;
    overflow-y: auto;
  }
  swiper {
    /* width: 100%; */
    height: 90%;
    overflow-y: auto;
    /* margin: 0 auto; */
  }
  /* 表格 */
  .tr{
    width: 100%;
  display: flex;
  /* justify-content: space-around;     */
}
.bg-f3f4f4{
      margin-bottom: 20rpx;
    background:rgba(28, 41, 53,0.05)
}
.tr>.th:nth-child(1),.tr>.td:nth-child(1){
    width: 40%;
    text-align: center;
}
.tr>.th:nth-child(2),.tr>.td:nth-child(2){
    width: 20%;
    text-align: center;
}
.tr>.th:nth-child(3),.tr>.td:nth-child(3){
    width: 40%;
    text-align: center;
}
.th,.td{
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height:80rpx;
  color: #041320;
}
.all-tabledata{
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  height: 40rpx;
  line-height:30rpx;
  color: #187EEF;
  text-align: center;
  margin: 40rpx 0;
}

这篇关于“微信小程序中的tab滑动切换效果如何做，代码是什么”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• jQuery Ajax书写语法及代码是怎样的？

  AJAX优点是可以异步请求服务器的数据，实现页面数据的实时动态加载， 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。jquery在全局对象jquery（也就是$）绑定了ajax()函数，可以处理Ajax请求，ajax常用的配置选项有

• JS新增数据类型Record和Tuple怎么用

  JavaScript即将推出两个新的数据类型：Record 和 Tuple ，这俩是啥呢？其实就是一个只读的 Object 和 Array，其实在其它语言中已经有类似的数据类型了，例如 Python 中也有 Tuple（元祖）这一类型，作用也是一个只读的数组（在Python里叫只读的列表），一起来了解一下，这个特性是一个第2阶段提案（即差不多稳了），想要提前体验的，文末也有 polyfill 的使用教程！

• 用JS怎么计算简单的算法，代码怎么写

  这篇文章主要介绍了如何利用javascript做简单的算法，主要是以提问的形式犹如练习小例子然后解决问题并附代码说明,需要的朋友可以参考一下

• 基于VUE如何利用minio实现上传文件

  最近项目中使用了minio作为静态资源管理服务,所以简单写一下如何通过minio来上传图片,下面这篇文章主要给大家介绍了关于Vue中通过minio上传文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

• 炫酷的代码雨效果怎样做？JS+canvas轻松搞定

  相信很多朋友有看到过代码雨这样的效果，觉得挺炫酷的，但是又不知道怎么样做，其实要实现炫酷的代码雨效果并不困难，我们用JS+canvas就可以轻松搞定，下面是实现效果和代码，感兴趣的就继续往下看吧。