• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

简单示例(提供思路):

 

 

 

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 }

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序卡片动画for循环发布时间:2022-07-18
下一篇:
第一次用python编写的小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap