微信小程序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大师发表，拒绝转载，转载需要作者授权

微信小程序Tab选项卡切换大集合相关推荐

微信小程序 - tab选项卡切换的实现方法
页面效果大体思路首先是把新闻的内容,还有活动的内容都列到wxml上然后把tab写出来.现在的难点是如何把tab和下面的内容联系起来我们定义一个公共变量,变量名是state,当state= 'n ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
微信小程序tab选项卡，点击弹窗（带蒙版）五星好评-获取微信手机号码
 <view class="swiper-tab"><view cl ...
微信小程序 tab选项卡，可点击，可滑动
看下效果图: <view class="swiper-tab"><view class="swiper-tab-item {{currentTab==0 ...
微信小程序：选项卡切换内容效果
wxml: <view class="swiper-tab"><view class="swiper-tab-list {{currentTab==0 ...
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换一.简介 1.核心思想二.实现 1.wxml实现 2.js实现 3.wxss实现三.参考和总结四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
微信小程序点击切换tab跟随动画
微信小程序点击切换tab跟随动画 <view class='tabbox'><view wx:for="{{title}}" class='tab {{curr ...
微信小程序顶部选项卡 tabs 下拉刷新
微信小程序顶部选项卡 tabs 下拉刷新 **首先 wxml 页面带swiper 滑动切换功能 **  <view class=& ...

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

一、前期准备工作

1、基本需求。

2、案例目录结构

二、程序实现具体步骤

1.选项卡xxx.wxml代码

2.xxx.wxss代码

3.部分xxx.js逻辑代码

三、案例运行效果图

微信小程序Tab选项卡切换大集合相关推荐

最新文章

热门文章