微信小程序開發(fā)之實現(xiàn)選項卡(窗口頂部TabBar)頁面切換
更新時間:2016年11月25日 14:07:05 作者:dzp_coder
本篇文章主要介紹了微信小程序開發(fā)之選項卡(窗口頂部TabBar)頁面切換,具有一定的參考價值,有需要的可以了解一下。
微信小程序開發(fā)中選項卡.在Android中選項卡一般用fragment,到了小程序這里瞬間懵逼了.
總算做出來了.分享出來看看.
先看效果:
再上代碼:
1.index.wxml
<!--index.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> <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> <!-- 我是哈哈 --> <swiper-item> <view>我是哈哈</view> </swiper-item> <!-- 我是呵呵 --> <swiper-item> <view>我是呵呵</view> </swiper-item> <!-- 我是嘿嘿 --> <swiper-item> <view>我是嘿嘿</view> </swiper-item> </swiper>
2.indexwxss
/**indexwxss**/ swiper-tab{ width: 100%; border-bottom: 2rpx solid #777777; text-align: center; line-height: 80rpx;} swiper-tab-list{ font-size: 30rpx; display: inline-block; width: 33%; color: #777777; } on{ color: #da7c0c; border-bottom: 5rpx solid #da7c0c;} swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } swiper-box view{ text-align: center; }
3.index.js
//index.js //獲取應用實例 var app = getApp() Page( { data: { /** * 頁面配置 */ winWidth: 0, winHeight: 0, // tab切換 currentTab: 0, }, onLoad: function() { var that = this; /** * 獲取系統(tǒng)信息 */ wxgetSystemInfo( { success: function( res ) { thatsetData( { winWidth: reswindowWidth, winHeight: reswindowHeight }); } }); }, /** * 滑動切換tab */ bindChange: function( e ) { var that = this; thatsetData( { currentTab: edetailcurrent }); }, /** * 點擊tab切換 */ swichNav: function( e ) { var that = this; if( thisdatacurrentTab === etargetdatasetcurrent ) { return false; } else { thatsetData( { currentTab: etargetdatasetcurrent }) } } })
這樣一個類似viewpage的頂部選項卡就出來了.
您可能感興趣的文章:
相關文章
js中document.write和document.writeln的區(qū)別
這篇文章主要介紹了js中document.write和document.writeln的區(qū)別,需要的朋友可以參考下2018-03-03Bootstrap select實現(xiàn)下拉框多選效果
這篇文章主要為大家詳細介紹了Bootstrap select實現(xiàn)下拉框多選效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12Fastest way to build an HTML string(拼裝html字符串的最快方法)
Fastest way to build an HTML stringPosted in 'Code Snippets, JavaScript' by James on May 29th, 20092011-08-08