微信小程序自定义可滑动的tab切换

本文实例为大家分享了微信小程序自定义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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

    微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

  • 微信小程序tab切换可滑动切换导航栏跟随滚动实现代码

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论 解决过程 1.在想要实现这个问题的时候找了不少别人的博客看,主体页面布局方面是比较统一的,tab导航栏使用<scroll-view>标签,内容使用<swi

  • 微信小程序tab左右滑动切换功能的实现代码

    效果图: 一.简介 自己的小程序需要实现这样的功能 1.核心思想 swiper 和scroll-view共用两个变量currentTab  navScrollLeft,当点击nav或者滑动swiper时设置两个变量的值为当前的index 二.实现 tab导航栏使用<scroll-view>标签,内容使用<swiper> 1.wxml实现 <view class="container"> <!-- tab导航栏 --> <!-- sc

  • 微信小程序实现tab左右切换效果

    本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码,供大家参考,具体内容如下 分析 1.设置data-current属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值. 2.swiper组件的current组件用于控制当前显示哪一页 3.swiper组件绑定change事件switchTab,通过e.detail.current拿到当前页 wxml: <view class="record-box"> &

  • 微信小程序下面商品左右滑动上面tab也跟随变动功能实现

    小程序下面商品左右滑动上面tab也跟随变动功能 点击tab切换下面的上面信息,商品左右滑动切换上面的tab分类 功能描述:点击tab切换下面的商品信息:滑动下面的商品信息tab也进行切换. 第一步:我们先来说一下上面的tab,tab我们使用scroll-view scroll-x="true" 就可以. <scroll-view class="cates" scroll-x="true" scroll-with-animation=&quo

  • 微信小程序 Tab页切换更新数据

    微信小程序 Tab页切换更新数据 微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天忽然发现不能用了_(:зゝ∠)_ 功能需求如下: 我在首页点击"5万以上"他会把跳转到买车页然后同时把"5万以上"这个筛选条件带到买车页. 之前navigator导航是可以跳转并携带数据的,但这一次官方更新加了个新东西-----switchTab,专门用来实现tab页的跳转,但禁止携带数据 那么如果还想要实现我们的效果只能用别的方法了 想了一下有两种思

  • 微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例

    本文实例讲述了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能.分享给大家供大家参考,具体如下: 顶部滚动选项卡 话不多说,直接上代码 pages/home/home.wxml <scroll-view scroll-x="true" style='width: 100%; white-space:nowrap; '> <!-- tab --> <view class="tab"> <view class=&qu

  • 10行代码实现微信小程序滑动tab切换

    本文实例为大家分享了微信小程序滑动tab切换展示的具体代码,供大家参考,具体内容如下 效果预览: js部分: Page({ data: { arr: [1,2,3,4,5,6,7,8], index: 1 }, onLoad: function (options) { this.setData({ childW: this.data.arr.length * 80 }); }, tabOn: function (e) { this.setData({ index: e.currentTarget

  • 微信小程序顶部导航栏滑动tab效果

    小程序商品展示需要导航栏的商品分类进行滑动,供大家参考,具体内容如下 效果图: 首先是滑动的效果: <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;"> </scroll-view> 小程序使用</scroll-view>,横向移动即可 WXML:这里面我将导航栏显示类目定义为5个,每个20%,当超出5个分类,也就是index>4的时候,导

  • 微信小程序滚动Tab实现左右可滑动切换

     微信小程序滚动Tab实现左右可滑动切换 效果: 最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当前屏中. 一.wxml结构 tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动. tab内容可左右滑动切换,使用swiper组件实现 为了偷懒,所以数据都通过wx:for遍历重复出来. 说明: 1.设置data-current

随机推荐