• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序Tab选项卡切换大集合 - demo例子集

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序Tab选项卡切换大集合

代码地址如下:
http://www.demodashi.com/demo/14028.html

一、前期准备工作

软件环境:微信开发者工具
官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。
  • 实现用户自定义弹框
  • 带动画(动画可做参靠,个人要是觉得不好看可以自定义动画)
  • 获取弹出框的内容,自定义事件获取
2、案例目录结构

二、程序实现具体步骤

1.选项卡xxx.wxml代码

a.tab1代码

<view class="navbar">
  <view class="navbar-item" wx:for="{{navbar}}" wx:for-index="idx" wx:key="" data-idx="{{idx}}" bindtap="swichNav">
    <text class="navbar-text {{currentNavbar==idx ? \'active\' : \'\'}}">{{item}}</text>
  </view>
</view>
<navigator url="/pages/index/index" hover-class="hover">
	<button class="btn-index">首页</button>
</navigator>

b.tab2代码

<view class="wrap" bindtouchstart="touchStart" bindtouchend="touchEnd">

  <view class="nav-item {{testClass[index]}}" wx:for="{{testNav}}" wx:key="" data-index="{{index}}">
    <view>{{item.word}}</view>
  </view>

</view>
<navigator url="/pages/index/index" hover-class="hover">
	<button class="btn-index">首页</button>
</navigator>

c.tabbar代码

<!--pages/tabbar/tabbar.wxml-->
<import src="../../template/list.wxml"/>

<view class="geekxz-tabbar-content">
  <view class="geekxz-tabbar-group">
    <text data-id="0" bindtap="changeTabbar" class="geekxz-tabbar-cell {{index == 0 ? \'geekxz-active\' : \'\'}}">已获得赏金</text>
    <text data-id="1" bindtap="changeTabbar" class="geekxz-tabbar-cell {{index == 1 ? \'geekxz-active\' : \'\'}}">赏金在路上</text>
    <text data-id="2" bindtap="changeTabbar" class="geekxz-tabbar-cell {{index == 2 ? \'geekxz-active\' : \'\'}}">邀请失败</text>
  </view>
</view>
<view class="geekxz-list-box {{index == 0 ? \'\' : \'geekxz-hide\'}}">
  <template wx:for="{{[\'选项卡一子选项 - 1\',\'选项卡一子选项 -  2\',\'选项卡一子选项 - 3\',\'选项卡一子选项 - 4\',\'选项卡一子选项 - 5\',\'选项卡一子选项 - 6\',\'选项卡一子选项 - 7\',\'选项卡一子选项 - 8\']}}" is="listNoneOnly" data="{{item}}" wx:key=""></template>
</view>
<view class="geekxz-list-box {{index == 1 ? \'\' : \'geekxz-hide\'}}">
  <template wx:for="{{[\'选项卡二子选项 - 1\',\'选项卡二子选项 -  2\',\'选项卡二子选项 - 3\',\'选项卡二子选项 - 4\',\'选项卡二子选项 - 5\']}}" is="listNoneOnly" data="{{item}}" wx:key=""></template>
</view>
<view class="geekxz-list-box {{index == 2 ? \'\' : \'geekxz-hide\'}}">
  <template wx:for="{{[\'选项卡三子选项 - 1\',\'选项卡三子选项 -  2\',\'选项卡三子选项 - 3\']}}" is="listNoneOnly" data="{{item}}" wx:key=""></template>
</view>
<navigator url="/pages/index/index" hover-class="hover">
	<button class="btn-index">首页</button>
</navigator>
2.xxx.wxss代码
.wrap{
  margin-top: 20rpx;
  color: #999;
  position: relative;
  width: 750rpx;
  height: 250rpx;
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;

}

.nav-item{
  margin-top:10px;
  width: 400rpx;
  height: 200rpx;
  box-shadow: 0 0 5rpx #e24233;
  padding: 5rpx;
  transition: all 0.5s;
  word-break:break-all;
  background-color: snow;
}

.prev{
  position: absolute;
  transform: scale(0.8);
  left: -280rpx;
  margin-right: 55rpx;
}

.current{
  position: absolute;
  left: 50%;
  margin-left: -200rpx;

}

.next{
  position: absolute;
  left:620rpx;
  top: 0;
  transform: scale(0.8);
  z-index: 10;
}

.next+.next{
  z-index: -1;
  background-color: deepskyblue;
}

3.部分xxx.js逻辑代码

a.部分的功能实现

swipNext (e) {
     flag++;
     if (flag < this.data.testNav.length){
       for (var i = 0; i < this.data.testNav.length; i++) {
         if (i == flag) {
           classCatch[i] = \'current\';
         } else if (i < flag) {
           classCatch[i] = \'prev\';
         } else {
           classCatch[i] = \'next\';
         }
       }
       this.setData({
         testClass: classCatch
       })
     }else{
       flag = this.data.testNav.length-1;
     }
  },
  swipPrev(e) {
    flag--;
    if (flag+1 > 0 ) {
      for (var i = 0; i < this.data.testNav.length; i++) {
        if (i == flag) {
          classCatch[i] = \'current\';
        } else if (i < flag) {
          classCatch[i] = \'prev\';
        } else {
          classCatch[i] = \'next\';
        }
      }
      this.setData({
        testClass: classCatch
      })
    } else {
      flag = 0;
    }
  }

三、案例运行效果图


微信小程序Tab选项卡切换大集合

代码地址如下:
http://www.demodashi.com/demo/14028.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序开发之选项卡切换【转】发布时间:2022-07-18
下一篇:
微信小程序——data-*自定义属性发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap