微信小程序开发中选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.
总算做出来了.分享出来看看.
先看效果:
再上代码:
1.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.index.wxss
-
- .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.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
-
-
- var app = getApp()
- Page( {
- data: {
-
-
-
- winWidth: 0,
- winHeight: 0,
-
- currentTab: 0,
- },
- onLoad: function() {
- var that = this;
-
-
-
-
- wx.getSystemInfo( {
-
- success: function( res ) {
- that.setData( {
- winWidth: res.windowWidth,
- winHeight: res.windowHeight
- });
- }
-
- });
- },
-
-
-
- bindChange: function( e ) {
-
- var that = this;
- that.setData( { currentTab: e.detail.current });
-
- },
-
-
-
- swichNav: function( e ) {
-
- var that = this;
-
- if( this.data.currentTab === e.target.dataset.current ) {
- return false;
- } else {
- that.setData( {
- currentTab: e.target.dataset.current
- })
- }
- }
- })
之前没有上传代码.这是下图的代码
demo下载地址
这样一个类似viewpage的顶部选项卡就出来了.
-----------------------------------------------------------------------------------
微信小程序开发中窗口底部tab栏切换页面很简单很方便.
代码:
1.app.json
- //app.json
- {
- "pages":[
- "pages/index/index",
- "pages/logs/logs"
- ],
- "window":{
- "backgroundTextStyle":"light",
- "navigationBarBackgroundColor": "#999999",
- "navigationBarTitleText": "tab",
- "navigationBarTextStyle":"white"
- },
- "tabBar": {
- "color": "#ccc",
- "selectedColor": "#35495e",
- "borderStyle": "white",
- "backgroundColor": "#f9f9f9",
- "list": [
- {
- "text": "首页",
- "pagePath": "pages/index/index",
- "iconPath": "images/home.png",
- "selectedIconPath": "images/home-actived.png"
- },
- {
- "text": "目录",
- "pagePath": "pages/catalogue/catalogue",
- "iconPath": "images/note.png",
- "selectedIconPath": "images/note-actived.png"
- },
- {
- "text": "我的",
- "pagePath": "pages/mine/mine",
- "iconPath": "images/profile.png",
- "selectedIconPath": "images/profile-actived.png"
- }
- ]
- }
- }
pagePath是页面路径.iconPath是图片路径,icon 大小限制为40kb.
selectedIconPath:选中时的图片路径,icon 大小限制为40kb
tab Bar的最多5个,最少2个.
在pages目录下写好页面即可切换.
http://blog.csdn.net/qq_31383345