小程序之单页面自定义tabbar

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

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

所谓单页面自定义tabbar：tabbar切换都在一个页面进行，把页面做成组件的形式。

一、效果图

二、示例代码

<view class="">
  <block wx:if="{{blockid==0}}">
    首页
  </block>
  <block wx:if="{{blockid==1}}">
    <!--把产品中心页面做成组件-->
    <component_product />
  </block>
  <block wx:if="{{blockid==2}}">
   了解产品页面
  </block>
  <block wx:if="{{blockid==3}}">
   我的页面
  </block>
  <tabbar tabbarData="{{content.lang.toolbar.list}}" active="{{0}}" bgcolor="{{bgcolor}}" color="{{color}}"
    selectedColor="{{selectedColor}}" showborder="{{showborder}}" bind:tapChange="tabbarChange" />
</view>

var app = getApp()
Page({
  data: {
    blockid: 0,
    bgcolor: '#ffffff',
    color: "#cccccc",
    selectedColor: '#369138',
    showborder: true,
    bordercolor: "",
    tabbar: [],
  },
  tabbarChange(e) {
    var index = parseInt(e.detail)
    _this.setData({
      blockid: index
    })
  },
  onLoad() {
    _this = this
    wx.hideHomeButton({
      success: (res) => {},
    })
  },
  onShow() {

  },
  getTabbar() {
    app.util.request({
      url: app.util.url('entry/wxapp/tabbar'),
      data: {
        
      },
      success(res) {
        var tabbar = res.data.data,
          title = tabbar[0].text
        wx.setNavigationBarTitle({
          title: title,
        })
        console.log(tabbar)
        _this.setData({
          tabbar: tabbar
        })
      }
    })
  }
})

product组件代码：

var app = getApp(),_this
Component({
  properties: {

  },
  data: {
    list: []
  },
  lifetimes: {
    created: function () {
      _this = this
    },
    attached: function () {
      console.log("attached")
      this.getList()
    }
  },
  methods: {
    getList: function () {
      console.log(app.util.url('entry/wxapp/template'))
      app.util.request({
        url: app.util.url('entry/wxapp/product'),
        showLoading: false,
        data: {
          m: 'we7_bybook_plugin_temp2',
          language: wx.getStorageSync('lang') ? wx.getStorageSync('lang') : 'zh'
        },
        success(res) {
          _this.setData({
            list: res.data.data
          })
        }
      })

    }
  }
})