最新公告
  • 欢迎您光临陆大湿,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  •  

    01

    tabBar底部菜单

    大家好,我是陆大师,今天给大家介绍下tabBar,所谓的tabBar就是小程序的底部菜单。一般定义在app.json中,如果需要修改,只需要修改app.json中的tabbar字段即可。这里我们今天重点说下tabBar如何自定义,通过自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景。

    02

    自定义tabBar

    1、首先建一个文件夹,用来存放公用的tabbar组件

    组件创建好后,开始编写具体实现功能代码

    wxml

      <view class="tab-bar" style="background-color: {{backgroundColor}};">    <view class="tab-bar-border"  style="background-color: {{topBorderColor}};"></view>  <view class="tab-bar-border"></view>  <view wx:for="{{list}}" wx:if="{{item.type!=4}}" wx:key="index" class="tab-bar-item"data-url="{{item.url}}" data-index="{{index}}" data-type="{{item.type}}"  data-appid="{{item.appid}}" data-id="{{item.id}}" data-outimg = "{{item.outimg}}" bindtap="switchTab">    <image src="{{selected === index ? item.sicon : item.icon}}"></image>    <view style="color: {{selected === index ? selectedColor : color}}">{{item.name}}</view>    </view></view>

    js这边我是写了一个请求,getApp().gettabbar(‘tabbar’).then就是请求后台,赋值给list,这样就实现后台自定义tabbar自定义菜单

    
    Component({ data: {  selectedColor: "#000000",  backgroundColor: "#ffffff",  color: "#8a8a8a",  topBorderColor: "#393d49",
     }, attached() {  var that = this;  getApp().gettabbar('tabbar').then(res=>{    that.setData({      list:res.data.data.list          })  }); },  methods: {  switchTab(s) {  const e = s.currentTarget.dataset  const app = getApp().globalData;  const url = e.url;  //console.log(e)  switch(e.type){    case 0:      wx.switchTab({url})      this.setData({        selected: e.index      })      break;    default:     app.gourl(e,'tabbar')     break;  }  },}})

    wxss

    
    .tab-bar {  position: fixed;  bottom: 0;  left: 0;  right: 0;  height: 96rpx;  background: white;  display: flex;  padding-bottom: env(safe-area-inset-bottom);} .tab-bar-border {  background-color: rgba(250,250,250 0.33);  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 1px;  transform: scaleY(0.5);} .tab-bar-item {  flex: 1;  text-align: center;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;} .tab-bar-item image {  width: 27px;  height: 27px;} .tab-bar-item view {  font-size: 10px;}

    json:

    {  "component": true}

    2、组件设置完成后,在 app.json 中的 tabBar 项指定 custom 字段设置true

    3、然后在需要中页面中引入tabbar,定义一个tabbar方法,在show中调用这个方法。这里的this.tabBar(0) 代表第一个页面,以此类推。0、1、2、3

    js:

      tabBar(index){            if(typeof this.getTabBar === 'function' && this.getTabBar()){              this.getTabBar().setData({                selected:index              })            }          },   onShow: function () {            this.tabBar(0        },

    这边我的样式基本上没什么变化,所以在wxml中就没有引入组件。

    还有一个在json中引入组件、在WXML中调用组件,

    单页面引入组件json:

    {  "navigationStyle": "custom",  "usingComponents": {    "cu-custom": "/colorui/components/cu-custom/cu-custom",    "tabbar":"/custom-tab-bar/index"  } }
    

    当然也可以在app.json中全局引用,这样所有的页面都能直接使用

    app.json:

      "usingComponents": {     "tabbar":"/custom-tab-bar/index"  },

    wxml:

    <tabbar id="tabbar" active="0" ></tabbar>

    js:

     onShow: function () {    if (typeof this.getTabBar === 'function' &&    this.getTabBar()) {    this.getTabBar().setData({      selected: null  //标亮的导航按钮的下标,如果是其他子页面,可以赋值为null    })  }  var tabbar = this.selectComponent("#tabbar")  tabbar.run(); },
    

    03

    最后说明

    大概的思路就是以上步骤、最近在学习小游戏,比较忙,后面给大家介绍小游戏。
    挪车出库:

    画线送水游戏:

    天天劈木板:

     
     

    本篇文章来源于微信公众号: 侵客技术


    © 版权声明
    版权声明 陆大湿原创,禁止转载!
    注意 本站发布的文章及教程仅限用于学习和研究目的.请勿用于商业或违法用途,否则后果请用户自负。 本站所有资源不带技术支持,下载资源请24小时内删除,如用于违法用途,或者商业用途,一律使用者承担,本站不承担任何责任!
    本站资源多为网络收集,如涉及版权问题请及时与站长联系邮箱:1104115170@qq.com,我们会在第一时间内删除资源。

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    陆大湿源码解压密码
    https://bbs.ludeqi.com

    发表评论

    发表评论

    • 5021会员总数(位)
    • 239资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 1718稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    升级SVIP尊享更多特权立即升级