suzhou-jichuang-lanhai
/
luyingxiaochengxu
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

封装navbar

Browse Source
master
许宏杰 3 years ago
parent 658f1dbde9
commit 6d3dc36783
15 changed files with 199 additions and 137 deletions
Show Stats Download Patch File Download Diff File

43
app.js
Unescape View File

@ -1,26 +1,6 @@
// app.js
App({
onLaunch() {
//获取胶囊的详细信息
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
//获取导航栏的整体高度
wx.getSystemInfo({
success: res => {
//导航高度
let statusBarHeight = res.statusBarHeight,
navTop = menuButtonObject.top,
navObjWid = res.windowWidth - menuButtonObject.right + menuButtonObject.width, // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度
navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
this.globalData.navHeight = navHeight; //导航栏总体高度
this.globalData.navTop = navTop; //胶囊距离顶部距离
this.globalData.navObj = menuButtonObject.height; //胶囊高度
this.globalData.navObjWid = navObjWid; //胶囊宽度(包括右边距离)
// console.log(navHeight,navTop,menuButtonObject.height,navObjWid)
},
fail(err) {
console.log(err);
}
})
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
@ -31,10 +11,16 @@ App({
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
this.setNavBarInfo();
},
globalData: {
userInfo: null,
navBarHeight: 0, // 导航栏高度
menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
menuWidth:0
},
//设置tabbar的选中 添加一个全局方法
// getTabBar方法为自定义组件下的方法
@ -45,5 +31,20 @@ App({
selected: selected
})
}
}
},
/**
* @description 设置导航栏信息
*/
setNavBarInfo() {
// 获取系统信息
const systemInfo = wx.getSystemInfoSync();
// 胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
this.globalData.menuHeight = menuButtonInfo.height;
this.globalData.menuWidth = menuButtonInfo.width;
}
})

47
app.wxss
Unescape View File

@ -10,50 +10,3 @@
padding: 200rpx 0;
box-sizing: border-box;
}
/*自定义导航条样式 */
.custom_head {
width: 750rpx;
color: #333;
position: fixed;
top: 0;
z-index: 1000;
/* border: 1px solid red; */
}
.head_store {
font-size: 30rpx;
font-weight: bold;
width: 340rpx;
margin-right: 30rpx;
margin-left: 22rpx;
flex-shrink: 0;
}
.navgtion-title{
position: relative;
}
.back-home{
position: absolute;
top: 50%;
left: 5%;
font-size: 35rpx;
color: #04063B;
transform: translate(-50%);
}
.title-nav{
font-family: "Alibaba-PuHuiTi-Bold.otf";
font-size: 35rpx;
font-weight: bold;
color: #000000;
position: absolute;
left: 50%;
transform: translate(-50%);
}
.navstyl{
background: #ffffff;
transition: all 1.5s;
}
.unnavstyl{
transition: all 1.5s;
}

62
navBar/index.js
Unescape View File

@ -0,0 +1,62 @@
// components/navBar.js
const app = getApp();
Component({
/**
* 组件的属性列表
*/
options: {
multipleSlots: true//开启多个插槽
},
properties: { //传参属性
navBarStyle:{
type:Number,
value:0
},
scrollCss:{
type:Number,
value:0
},
textColor:{
type:String,
value:''
},
titlebg:{
type:String,
value:''
},
},
/**
* 组件的初始数据
*/
data: {
navBarHeight: app.globalData.navBarHeight, //导航栏高度
menuRight: app.globalData.menuRight, // 胶囊距右方间距（方保持左、右间距一致）
menuBotton: app.globalData.menuBotton,
menuHeight: app.globalData.menuHeight,
menuWidth: app.globalData.menuWidth
},
/**
* 组件的方法列表
*/
methods: {
},
onPageScroll: function (e) {
console.log("页面滚动距离：",e);
if(e.scrollTop > 80 && e.scrollTop < 100){
this.setData({
navBarStyle:1
})
}
else if(e.scrollTop > 100){
this.setData({
navBarStyle:2
})
}else{
this.setData({
navBarStyle:0
})
}
},
})

4
navBar/index.json
Unescape View File

@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

14
navBar/index.wxml
Unescape View File

@ -0,0 +1,14 @@
<view class="nav {{scrollCss>10? 'navstyl' : 'unnavstyl'}}" style="height:{{navBarHeight}}px;background: {{titlebg}};">
<view class="nav-main" style="height:{{menuHeight}}px;bottom:{{menuBotton}}px;left:{{menuRight}}px;right:{{menuRight}}px">
<!-- 胶囊区域 -->
<view class="capsule-box" style="height:{{menuHeight}}px;width:{{menuWidth}}px"></view>
<!-- 导航内容区域 -->
<view class="left" style="color:{{textColor}}">
<slot name="left"></slot>
</view>
<view class="mid" style="color:{{textColor}}">
<slot name="mid"></slot>
</view>
</view>
</view>
<!-- class="nav {{ navBarStyle == 2 ? 'activeNavBar' : ''}} {{ navBarStyle == 1 ? 'gradual' : ''}}" -->

51
navBar/index.wxss
Unescape View File

@ -0,0 +1,51 @@
.nav {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100vw;
}
/* 半透明渐变过渡 */
.nav.gradual {
background: -webkit-linear-gradient(top, transparent, rgba(255, 255, 255, 0.4) 30%);
background: -moz-linear-gradient(top, transparent, rgba(255, 255, 255, 0.4) 30%);
background: -o-linear-gradient(top, transparent, rgba(255, 255, 255, 0.4) 30%);
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 30%);
}
.nav.activeNavBar {
background: #ffffff;
}
.nav-main {
height: 100%;
position: absolute;
display: flex;
align-items: center;
}
.nav-main .mid {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 35rpx;
font-family: "Alibaba-PuHuiTi-Bold.otf";
font-weight: bold;
color: #000000;
}
.nav-main .left{
font-size: 35rpx;
color: #000000;
margin-left: 20rpx;
}
/* 胶囊 */
.nav-main .capsule-box {
position: absolute;
right: 0;
box-sizing: border-box;
}
.navstyl{
background: #ffffff;
transition: all 1.5s;
}
.unnavstyl{
transition: all 1.5s;
}

23
pages/info/info.js
Unescape View File

@ -8,9 +8,10 @@ Page({
data: {
infoName:'九龙湖公园',
infoLogo:'http://www.jichuanglanhai.com/demo/yingdi-file/zhu4.jpeg',
navgtionObj:{},
scrollTop:0,
toView:'item0',
navBarHeight: app.globalData.navBarHeight, //导航栏高度
titleColor:'#FFFFFF',
pjList:[
{
id:1,
@ -80,7 +81,7 @@ Page({
})
},
//返回上一页
backHome(){
goBack(){
wx.navigateBack()
},
/**
@ -93,22 +94,20 @@ Page({
infoLogo:options.img
})
}
let obj = {
navHeight:app.globalData.navHeight,
navObj:app.globalData.navObj,
navObjWid:app.globalData.navObjWid,
navTop:app.globalData.navTop,
}
this.setData({
navgtionObj:obj
})
},
// 触发滚动条
onPageScroll(e){
//给顶部导航条增加背景
let colors = ''
if(e.scrollTop>10){
colors='#000000'
}else{
colors = '#FFFFFF'
}
this.setData({
scrollTop:e.scrollTop
scrollTop:e.scrollTop,
titleColor:colors
})
},

4
pages/info/info.json
Unescape View File

@ -1,4 +1,6 @@
{
"usingComponents": {},
"usingComponents": {
"my-navBar":"/navBar/index"
},
"navigationStyle":"custom"
}

16
pages/info/info.wxml
Unescape View File

@ -1,15 +1,11 @@
<view class="info-container">
<!-- 自定义导航栏 -->
<view class="custom_head {{scrollTop>10 ? 'navstyl' : 'unnavstyl'}}" style="height:{{navgtionObj.navHeight}}px;">
<view class="flex-row" style="height:{{navgtionObj.navObj}}px;padding-top:{{navgtionObj.navTop+5}}px;">
<view class="navgtion-title" bindtap="goBack" >
<view class="back-home {{scrollTop>10? 'navTitleColor' : ''}}" bindtap="backHome">
<van-icon name="arrow-left" />
</view>
<text class="title-nav {{scrollTop>10? 'navTitleColor' : ''}}">基地详情</text>
</view>
</view>
</view>
<my-navBar scrollCss="{{scrollTop}}" textColor="{{titleColor}}">
<view class="back" slot="left" bindtap="goBack">
<van-icon name="arrow-left" />
</view>
<view class="title" slot="mid">基地详情</view>
</my-navBar>
<!-- 主体内容 -->
<view class="info-item">
<view class="info-title-image">

14
pages/intro/intro.js
Unescape View File

@ -6,24 +6,16 @@ Page({
* 页面的初始数据
*/
data: {
navgtionObj:{}
navBarHeight: app.globalData.navBarHeight, //导航栏高度
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let obj = {
navHeight:app.globalData.navHeight,
navObj:app.globalData.navObj,
navObjWid:app.globalData.navObjWid,
navTop:app.globalData.navTop,
}
this.setData({
navgtionObj:obj
})
},
backHome(){
goBack(){
wx.navigateBack()
},
/**

4
pages/intro/intro.json
Unescape View File

@ -1,4 +1,6 @@
{
"usingComponents": {},
"usingComponents": {
"my-navBar":"/navBar/index"
},
"navigationStyle":"custom"
}

19
pages/intro/intro.wxml
Unescape View File

@ -1,15 +1,12 @@
<!--pages/intro/intro.wxml-->
<!-- 自定义导航栏 -->
<view class="custom_head" style="height:{{navgtionObj.navHeight}}px; background: white;">
<view class="flex-row" style="height:{{navgtionObj.navObj}}px;padding-top:{{navgtionObj.navTop+5}}px;">
<view class="navgtion-title" bindtap="goBack" >
<view class="back-home" bindtap="backHome">
<van-icon name="arrow-left" />
</view>
<text class="title-nav">景区简介</text>
</view>
</view>
</view>
<view class="intro-text" style="margin-top:{{navgtionObj.navHeight}}px">
<!-- 自定义导航栏 -->
<my-navBar scrollCss="{{scrollTop}}" titlebg="white">
<view class="back" slot="left" bindtap="goBack">
<van-icon name="arrow-left" />
</view>
<view class="title" slot="mid">景区简介</view>
</my-navBar>
<view class="intro-text" style="margin-top:{{navBarHeight}}px">
<text> 九龙湖风景区，位于浙江省宁波市镇海区九龙湖镇境内，原为慈溪县（今慈城）河头乡河头市，距慈溪老县城（慈城）约15公里，距宁波市中心约20公里。十字路水库，别名九龙湖，水库位于达蓬山以南，处于姚江流域，水域面积3平方公里，始建于1977年，1979年建成，包含九龙湖水库、小洞岙水库、郎家坪水库和三圣殿水库四个水库，是镇海区饮用水源地，国家4A级旅游景区。\n 湖周黛峰如眉，翠岭逶迤；湖中碧波如镜，岚影倒悬。波光蓝天一色，绿树修竹相映，景色极为旖旎。湖北侧，九龙山伟岸挺拔，九个山头和九条山脊并列一起，犹如九条卧龙伏地，绵亘数里，九龙山和九龙湖之名，皆藉此而来。时人有“九龙盘青山，松竹映碧波”的诗句，描述九龙山和九龙湖的景致。湖东北，是大蓬山，亦名达蓬山，海拔315米，山势峥嵘，崖岩危突，登顶可眺望东海。</text>
</view>

12
pages/list/list.js
Unescape View File

@ -1,13 +1,11 @@
// pages/list/list.js
let app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
value:5,
navgtionObj:{},
scrollTop:0,
show:false,
columns: ['全部', '公共露营地', '精致露营地', '乡野露营地', '特色露营地','公园露营地','轻奢露营地','新晋露营地','郊野露营地'],
@ -59,6 +57,7 @@ Page({
}
],
list2:[],
navBarHeight: app.globalData.navBarHeight, //导航栏高度
},
//显示select弹出层
showModel(){
@ -109,15 +108,6 @@ Page({
this.setData({
list2:JSON.parse(JSON.stringify(this.data.list))
})
let obj = {
navHeight:app.globalData.navHeight,
navObj:app.globalData.navObj,
navObjWid:app.globalData.navObjWid,
navTop:app.globalData.navTop,
}
this.setData({
navgtionObj:obj
})
// console.log('自定义导航栏',this.data.navgtionObj)
},

4
pages/list/list.json
Unescape View File

@ -1,5 +1,7 @@
{
"usingComponents": {},
"usingComponents": {
"my-navBar":"/navBar/index"
},
"navigationStyle":"custom"
}

19
pages/list/list.wxml
Unescape View File

@ -1,18 +1,15 @@
<!--pages/list/list.wxml-->
<view class="list-container">
<!-- 自定义导航条 -->
<view class="custom_head {{scrollTop>10 ? 'navstyl' : 'unnavstyl'}}" style="height:{{navgtionObj.navHeight}}px;">
<view class="flex-row" style="height:{{navgtionObj.navObj}}px;padding-top:{{navgtionObj.navTop+5}}px;">
<view class="navgtion-title" bindtap="goBack" >
<view class="back-home" bindtap="goBack">
<van-icon name="arrow-left" />
</view>
<text class="title-nav">营地列表</text>
</view>
</view>
</view>
<my-navBar scrollCss="{{scrollTop}}">
<view class="back" slot="left" bindtap="goBack">
<van-icon name="arrow-left" />
</view>
<view class="title" slot="mid">营地列表</view>
</my-navBar>
<!-- 主体内容 -->
<view class="list-data-box" style="padding-top:{{navgtionObj.navHeight}}px;">
<view class="list-data-box" style="padding-top:{{navBarHeight}}px;">
<view class="data-title" bindtap="showModel">
<view class="title-text">
{{activeColumnsName}}

Write Preview
Loading…
Cancel
Save