xiaowen
3 years ago
parent
233a662839
commit
e45353685a
@ -1,19 +1,79 @@
|
||||
// app.js
|
||||
//app.js
|
||||
App({
|
||||
onLaunch() {
|
||||
// 展示本地存储能力
|
||||
const logs = wx.getStorageSync('logs') || []
|
||||
logs.unshift(Date.now())
|
||||
wx.setStorageSync('logs', logs)
|
||||
|
||||
// 登录
|
||||
wx.login({
|
||||
success: res => {
|
||||
// 发送 res.code 到后台换取 openId, sessionKey, unionId
|
||||
onLaunch: function () {
|
||||
this.hidetabbar();
|
||||
this.getSystemInfo();
|
||||
},
|
||||
//自己对wx.hideTabBar的一个封装
|
||||
hidetabbar() {
|
||||
wx.hideTabBar({
|
||||
fail: function() {
|
||||
setTimeout(function() { // 做了个延时重试一次，作为保底。
|
||||
wx.hideTabBar()
|
||||
}, 500)
|
||||
}
|
||||
});
|
||||
},
|
||||
getSystemInfo: function() {
|
||||
let t = this;
|
||||
wx.getSystemInfo({
|
||||
success: function(res) {
|
||||
t.globalData.systemInfo = res;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
editTabbar: function() {
|
||||
let tabbar = this.globalData.tabBar;
|
||||
let currentPages = getCurrentPages();
|
||||
let _this = currentPages[currentPages.length - 1];
|
||||
let pagePath = _this.route;
|
||||
(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
|
||||
for (let i in tabbar.list) {
|
||||
tabbar.list[i].selected = false;
|
||||
(tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
|
||||
}
|
||||
_this.setData({
|
||||
tabbar: tabbar
|
||||
});
|
||||
},
|
||||
globalData: {
|
||||
userInfo: null
|
||||
systemInfo: null,//客户端设备信息
|
||||
tabBar: {
|
||||
"color": "#727272",
|
||||
"selectedColor": "#F46368",
|
||||
"backgroundColor": "#ffffff",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "/pages/index/index",
|
||||
"text": "首页",
|
||||
"iconPath": "/components/tabbarComponent/icon/home.png",
|
||||
"selectedIconPath": "/component/tabbarComponent/icon/homeSel.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/insight/index",
|
||||
"text": "服务",
|
||||
"iconPath": "/components/tabbarComponent/icon/service.png",
|
||||
"selectedIconPath": "/component/tabbarComponent/icon/serviceSel.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/brandSearch/index",
|
||||
"text": "导航",
|
||||
"iconPath": "/components/tabbarComponent/icon/navagati.png",
|
||||
"isSpecial": true,
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/varComm/index",
|
||||
"text": "订单",
|
||||
"iconPath": "/components/tabbarComponent/icon/order.png",
|
||||
"selectedIconPath": "/component/tabbarComponent/icon/orderSel.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/mine/index",
|
||||
"text": "我的",
|
||||
"iconPath": "/components/tabbarComponent/icon/my.png",
|
||||
"selectedIconPath": "/component/tabbarComponent/icon/mySel.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
After Width: | Height: | Size: 566 B |
|
After Width: | Height: | Size: 814 B |
|
After Width: | Height: | Size: 695 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 729 B |
@ -0,0 +1,51 @@
|
||||
// tabBarComponent/tabBar.js
|
||||
const app = getApp();
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
tabbar: {
|
||||
type: Object,
|
||||
value: {
|
||||
"backgroundColor": "#ffffff",
|
||||
"color": "#979795",
|
||||
"selectedColor": "#1c1c1b",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "/pages/index/index",
|
||||
"iconPath": "icon/icon_home.png",
|
||||
"selectedIconPath": "icon/icon_home_HL.png",
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "/pages/middle/middle",
|
||||
"iconPath": "icon/icon_release.png",
|
||||
"isSpecial": true,
|
||||
"text": "发布"
|
||||
},
|
||||
{
|
||||
"pagePath": "/pages/mine/mine",
|
||||
"iconPath": "icon/icon_mine.png",
|
||||
"selectedIconPath": "icon/icon_mine_HL.png",
|
||||
"text": "我的"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
isIphoneX: app.globalData.systemInfo.model.search('iPhone X') != -1 ? true : false
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
|
||||
<block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">
|
||||
<navigator wx:if="{{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}" open-type="navigate">
|
||||
<view class='special-wrapper'><image class="tabbar_icon" src="{{item.iconPath}}"></image></view>
|
||||
<image class='special-text-wrapper'></image>
|
||||
<text>{{item.text}}</text>
|
||||
</navigator>
|
||||
<navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
|
||||
<image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
|
||||
<text>{{item.text}}</text>
|
||||
</navigator>
|
||||
</block>
|
||||
</view>
|
||||
@ -0,0 +1,63 @@
|
||||
.tabbar_box{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 98rpx;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.tabbar_box.iphoneX-height{
|
||||
padding-bottom: 66rpx;
|
||||
}
|
||||
.middle-wrapper{
|
||||
position: absolute;
|
||||
right: 310rpx;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
border-top: 2rpx solid #f2f2f3;
|
||||
}
|
||||
.middle-wrapper.iphoneX-height{
|
||||
bottom: 66rpx;
|
||||
}
|
||||
.tabbar_nav{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 20rpx;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.tabbar_icon{
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
.special-wrapper{
|
||||
position: absolute;
|
||||
left: 77rpx;
|
||||
top: -36rpx;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
border-top: 2rpx solid #f2f2f3;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: 6rpx;
|
||||
}
|
||||
.special-wrapper .tabbar_icon{
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
}
|
||||
.special-text-wrapper{
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
"usingComponents": {
|
||||
"tabbar": "/component/tabbarComponent/tabbar"
|
||||
}
|
||||
}
|
||||
@ -1,23 +1,5 @@
|
||||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<view class="userinfo">
|
||||
<block wx:if="{{canIUseOpenData}}">
|
||||
<view class="userinfo-avatar" bindtap="bindViewTap">
|
||||
<open-data type="userAvatarUrl"></open-data>
|
||||
</view>
|
||||
<open-data type="userNickName"></open-data>
|
||||
</block>
|
||||
<block wx:elif="{{!hasUserInfo}}">
|
||||
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
|
||||
<button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
|
||||
<view wx:else> 请使用1.4.4及以上版本基础库 </view>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
|
||||
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
|
||||
</block>
|
||||
</view>
|
||||
<view class="usermotto">
|
||||
<text class="user-motto">{{motto}}</text>
|
||||
</view>
|
||||
<text>1123123</text>
|
||||
<tabbar tabbar="{{tabbar}}"></tabbar>
|
||||
</view>
|
||||
|
||||
Loading…
Reference in new issue