zoukankan      html  css  js  c++  java
  • 小程序自定义 tabbar 以vant weapp为例

    1.首先建立 custom-tab-bar 文件夹  包含 index.js  index.json index.wxml

    // index.js文件
    Component({ data: { active:
    0, list: [ { "url": "/pages/index/index", "icon": "wap-home-o", "text": "首页" }, { "url": "/pages/index/prize", "icon": "orders-o", "text": "奖品" }, { "url": "/pages/index/exchange", "icon": "points", "text": "兑换" }, { "url": "/pages/index/my", "icon": "user-circle-o", "text": "我的" } ] }, methods: { onChange(e) { console.log(e,'e') this.setData({ active: e.detail }); wx.switchTab({ url: this.data.list[e.detail].url }); }, init() { const page = getCurrentPages().pop(); this.setData({   active: this.data.list.findIndex(item => item.url === `/${page.route}`) }); } } });

    index.json文件

    {
        "component": true,
        "usingComponents": {
            "van-tabbar": "@vant/weapp/tabbar/index",
          "van-tabbar-item": "@vant/weapp/tabbar-item/index",
        "van-icon": "@vant/weapp/icon/index"
        }
    }

    index.wxml文件

    <van-tabbar active="{{ active }}" bind:change="onChange">
      <van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}">{{
        item.text
      }}</van-tabbar-item>
    </van-tabbar>
      /**
       * 生命周期函数--监听页面显示   在每个tabbar页面onshow 调用即可;
       */
      onShow: function () {
        console.log('个人中心')
        this.getTabBar().init();
      },

     app.json文件

    {
      "pages": [
        "pages/index/index",
        "pages/index/prize",
        "pages/index/exchange",
        "pages/index/my"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      },
      "usingComponents": {
    
      },
      "tabBar": {
        "custom": true,
        "color": "#000000",
        "selectedColor": "#000000",
        "backgroundColor": "#000000",
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          {
            "pagePath": "pages/index/prize",
            "text": "奖品"
          },
          {
            "pagePath": "pages/index/exchange",
            "text": "兑换"
          },
          {
            "pagePath": "pages/index/my",
            "text": "我的"
          }
        ]
      },
      "sitemapLocation": "sitemap.json"
    }

     原创未经允许不得转载!!!转载请注明出处~谢谢合作;

  • 相关阅读:
    JQuery图片局部放大
    c# .net 如何使用log4net记录日志
    VS2010添加自定义的项目模板及项模板
    Virtualbox运行报cannot access the kernel driver的解决方法
    Session超时设置
    WebBrowser 错误处理
    asp.net MVC 2 自定义用户角色权限设计
    c# 调用CMD不显窗口
    C#遍历CookieContainer所有Cookie并保存到文件
    Application,Session,Cookie,ViewState和Cache区别
  • 原文地址:https://www.cnblogs.com/lhl66/p/12870139.html
Copyright © 2011-2022 走看看