摘要
最近在体验小程序的时候,总会遇到一种自定义导航栏,随着上划的动作,颜色逐渐变化,思考后,自己实现一下
效果
体验
体验路径:自定义系列>导航栏
代码
分为页面和组件两部分
页面部分
js
let navigationBar
Page({
onLoad: function (options) {
navigationBar = this.selectComponent("#navigationBar")
},
back2home(){
wx.navigateBack({
delta: 1,
})
},
onPageScroll: function (e) {
var scrollTop = e.scrollTop
navigationBar.setOpacity(scrollTop,200)
}
})
json
{
"usingComponents": {
"navigationBar":"utils/navigationBar/navigationBar"
},
"navigationStyle": "custom"
}
wxml
<view class="container">
<navigationBar id="navigationBar"></navigationBar>
<view class="view-row" style="color:#aaa;font-size:36rpx;margin:30rpx;border-bottom:1rpx solid #aaa;padding:10rpx">custom-自定义导航栏</view>
<view style="font-size:32rpx;color:#aaa">上划改变导航栏样式</view>
<image style="width:500rpx;height:800rpx;border-radius:20rpx;margin-top:20rpx" src="cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/00015.jpg"></image>
<image style="width:500rpx;height:350rpx;border-radius:20rpx;margin-top:20rpx" src="cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/00015.jpg"></image>
<image style="width:500rpx;height:600rpx;border-radius:20rpx;margin-top:20rpx" src="cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/00015.jpg"></image>
</view>
组件部分
js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
menuButtonBoundingClientRect:{},
systemInfo:{},
opacity:0
},
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () {
var that = this
wx.getSystemInfo({
success: function(res) {
that.setData({
systemInfo: res,
menuButtonBoundingClientRect: wx.getMenuButtonBoundingClientRect()
})
console.log(that.data.systemInfo)
},
})
},
hide: function () { },
resize: function () { },
},
/**
* 组件的方法列表
*/
methods: {
setOpacity:function(scrollTop,maxTop){
var opacity = 0
if(scrollTop<=maxTop){
opacity = scrollTop/maxTop
}else{
opacity = 1
}
this.setData({
opacity:opacity
})
},
back2home:function() {
wx.navigateBack({
delta: 1,
})
},
}
})
json
{
"component": true,
"usingComponents": {}
}
wxml
<view class="container">
<view class="view-navigation-bg" style="width:{{systemInfo.windowWidth}}px;height:{{menuButtonBoundingClientRect.bottom+10}}px;opacity:{{opacity}}">
</view>
<view class="view-navigation-container" style="width:{{systemInfo.windowWidth}}px;height:{{menuButtonBoundingClientRect.bottom+10}}px;">
<image class="image-navigation-back" src="../home.png" style="width:{{menuButtonBoundingClientRect.height-10}}px;height:{{menuButtonBoundingClientRect.height-10}}px;padding:5px;margin-left:10px;top: {{menuButtonBoundingClientRect.top}}px;" catchtap="back2home"></image>
</view>
<view style="width:{{systemInfo.windowWidth}}px;height:{{menuButtonBoundingClientRect.bottom+10}}px;">
</view>
</view>
wxss
.view-navigation-bg{
background: rgb(247, 196, 28);
position: fixed
}
.view-navigation-container{
position: fixed
}
.image-navigation-back{
position: absolute;
left: 0
}