码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2018-07-28 11:52:26      阅读:282      评论:0      收藏:0      [点我收藏+]

标签:定位   bubuko   code   Fix   全局   width   ott   技术分享   形式   

简单示例(提供思路):

技术分享图片

 

 

 

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

 1 <view class=tab-bar>
 2   <view class="usermotto">
 3     <navigator url=../logs/logs>
 4       <button class="user-motto">tabbar1</button>
 5     </navigator>
 6   </view>
 7 
 8   <view class="usermotto">
 9     <navigator url=../index/index>
10       <button class="user-motto">tabbar2</button>
11     </navigator>
12   </view>
13 
14   <view class="usermotto">
15     <navigator url=../logs/logs>
16       <button class="user-motto">tabbar3</button>
17     </navigator>
18   </view>
19 </view>

 

wxss(作为全局放入到app.wxss里面去)

 1 .tab-bar {
 2   width: 100%;
 3   position: fixed;
 4   bottom: 0;
 5   padding: 2%;
 6   display: flex;
 7   justify-content: space-around;
 8   box-shadow: 1px 1px 1px 1px #ddd;
 9   background-color: #ddd;
10 }
11 
12 .tab-bar button {
13   color: #fff;
14   background-color: #1D82FE;
15 }

 

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

标签:定位   bubuko   code   Fix   全局   width   ott   技术分享   形式   

原文地址:https://www.cnblogs.com/cisum/p/9380792.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!