微信小程序 - 替换tabbar（采用固定定位形式）

简单示例（提供思路）：

 

 

 

wxml（作为模板形式插入到需要tabbar的地方去）

<view class='tab-bar'>
  <view class="usermotto">
    <navigator url='../logs/logs'>
      <button class="user-motto">tabbar1</button>
    </navigator>
  </view>

  <view class="usermotto">
    <navigator url='../index/index'>
      <button class="user-motto">tabbar2</button>
    </navigator>
  </view>

  <view class="usermotto">
    <navigator url='../logs/logs'>
      <button class="user-motto">tabbar3</button>
    </navigator>
  </view>
</view>

 

wxss（作为全局放入到app.wxss里面去）

.tab-bar {
  width: 100%;
  position: fixed;
  bottom: 0;
  padding: 2%;
  display: flex;
  justify-content: space-around;
  box-shadow: 1px 1px 1px 1px #ddd;
  background-color: #ddd;
}

.tab-bar button {
  color: #fff;
  background-color: #1D82FE;
}