小程序之Tab切换

小程序越来越火了，作为一名，额有理想的攻城狮，当然要紧跟互联网时代的步伐啦，于是我赶紧抽时间学习了一下小程序的开发，顺便把经验分享给大家。

对于申请账号以及安装开发工具等，大家可以看官网：https://mp.weixin.qq.com/debug/wxadoc/dev/。

●先上成果

小程序之Tab切换

.wxml代码：

 　<view class='container'>

    <!-- 底部导航 -->

    <view class='bottom-nav'>

      <view class='tab-list'>

        <view class="nav-list {{sign == 1?'add-tabing':'add-tab'}}" data-num = "" bindtap='clickNav'>首页</view>

        <view class="nav-list {{sign == 2?'add-tabing':'add-tab'}}" data-num = "" bindtap='clickNav'>地图</view>

        <view class="nav-list {{sign == 3?'add-tabing':'add-tab'}}" data-num = "" bindtap='clickNav'>个人中心</view>

      </view>

    </view>

    <view>

      <!-- 首页 -->

      <view class="cont-detail {{sign == 1?'tab-show':'tab-hide'}}" data-num = "">

          当前首页页面待开发

      </view>

      <!-- 地图 -->

      <view class="cont-detail {{sign == 2?'tab-show':'tab-hide'}}" data-num = "">

        当前地图页面待开发

      </view>

      <!-- 个人中心 -->

      <view class="cont-detail {{sign == 3?'tab-show':'tab-hide'}}" data-num = "">

        当前个人中心页面待开发

      </view>

    </view>

</view>

.js代码：

Page({

  data: {

    sign: ,

  },

  clickNav: function (e) {

    //console.log(e)  有想深入了解e代表什么的话，可以打印出来看看

    this.setData({

      sign: e.target.dataset.num

    })

  },

})

.wxss代码：

.container .bottom-nav{width: %;height: 50px;line-height: 50px; position: absolute; bottom: ;left: ;background: #fff;}

.container .tab-list{display: flex;font-size: 16px;}

.container .tab-list .nav-list{flex: ;text-align: center}

.container .tab-list .add-tabing{color: #ff9900;}

.container .tab-list .add-tab{color: #;}

.cont-detail{width: %;height: %;}

.tab-show{display: block;}

.tab-hide{display: none;}

.cont-detail{width: %;margin-top: 300rpx;text-align: center}

秒客网

小程序之Tab切换

相关文章