小程式自定義底部選單欄
阿新 • • 發佈:2019-01-08
問題:小程式的底部選單欄基本的樣式根本不能滿足我們的審美要求,所以我們可以通過自己來自定義一套小程式底部欄,可以設定透明背景喲,想要什麼樣式都可以自己定義,好了,廢話不多說,直接上程式碼!
- 首先在和pages同一級建錄建立tabbar.xml,如右截圖所示
- 具體的tabbar.xml程式碼如下所示:下面是講這個程式碼封裝成了一個模板,好處大家都知道,就是方便多處使用
<template name="tabBar"> <view class="tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}"> <block wx:for="{{tabBar.list}}" wx:key="pagePath"> <navigator url="{{item.pagePath}}" open-type="redirect" class="{{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}"> <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image> <image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image> <text>{{item.text}}</text> </navigator> </block> <view class="clear"></view> </view> </template>
3.接下來就是app.wxss中寫樣式了,具體程式碼如下所示:
/**app.wxss**/ .container { width: 100%rpx; height: 100%rpx; font-size: 32rpx; } .menu-item { width: 24%; float: left; border-right: 1px solid rgb(200, 200, 200); text-align: center; padding-top: 8px; } .menu-item2{ border-right:none; } .img { width: 23px; height: 23px; display: block; margin: auto; } .clear { clear: both; } .tab-bar { background-color:rgb(243, 243, 243); opacity: .8; position: fixed; width: 100%; /* padding: 0px 2%; */ }
4. 就是在app.js中寫js動態樣式了,從36行開始到最後一行
//app.js App({ onLaunch: function () { // 展示本地儲存能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登入 wx.login({ success: res => { // 傳送 res.code 到後臺換取 openId, sessionKey, unionId } }) // 獲取使用者資訊 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已經授權,可以直接呼叫 getUserInfo 獲取頭像暱稱,不會彈框 wx.getUserInfo({ success: res => { // 可以將 res 傳送給後臺解碼出 unionId this.globalData.userInfo = res.userInfo // 由於 getUserInfo 是網路請求,可能會在 Page.onLoad 之後才返回 // 所以此處加入 callback 以防止這種情況 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }) } } }) }, globalData: { userInfo: null }, editTabBar: function () { var _curPageArr = getCurrentPages(); var _curPage = _curPageArr[_curPageArr.length - 1]; var _pagePath = _curPage.__route__; if (_pagePath.indexOf('/') != 0) { _pagePath = '/' + _pagePath; } var tabBar = this.globalData.tabBar; for (var i = 0; i < tabBar.list.length; i++) { tabBar.list[i].active = false; if (tabBar.list[i].pagePath == _pagePath) { tabBar.list[i].active = true;//根據頁面地址設定當前頁面狀態 } } _curPage.setData({ tabBar: tabBar }); }, globalData: { userInfo: null, tabBar: { color: "#a9b7b7", selectedColor: "#ff8124", borderStyle: "white", list: [ { selectedIconPath: "/pages/image/1-1.png", iconPath: "/pages/image/1.png", pagePath: "/pages/index/index", text: "首頁", clas: "menu-item", selected: false, }, { selectedIconPath: "/pages/image/2-1.png", iconPath: "/pages/image/2.png", pagePath: "/pages/collect/collect", text: "收藏", clas: "menu-item", selected: false }, { selectedIconPath: "/pages/image/3-1.png", iconPath: "/pages/image/3.png", pagePath: "/pages/disses/disses", text: "需求填寫", clas: "menu-item", selected: false }, { selectedIconPath: "/pages/image/4-1.png", iconPath: "/pages/image/4.png", pagePath: "/pages/index/index", text: "房屋管理", clas: "menu-item menu-item2", selected: false } ], position: "bottom" } } })
5. 最後就是引用這個定義好的模板了,程式碼如下:
5.1首先帶在js中頁面正在載入的時候就顯示出來,程式碼就是下面的onload執行的程式碼
//index.js
//獲取應用例項
const app = getApp()
Page({
onLoad: function (options) {
app.editTabBar();
}
})
5.2然後就是collection.wxml中的引用模板就可以了
<!--index.wxml-->
<view class="container">
<import src="../../tabbar.wxml" />
<template is="tabBar" data="{{tabBar}}" />
</view>
以上程式碼僅供參考!