默认状态下标题居中
屏幕上滑标题向左移动图像变大
屏幕上滑到设定值图像大小固定,标题位置固定
代码如下:
页面json文件设置为自定义模式
{
"navigationBarTitleText": "标题栏",
"navigationStyle": "custom",
"navigationBarTextStyle": "black",
"usingComponents": {
}
}
wxml文件:
//导航栏样式
<view class="pageNavBg" style="height: calc({{statusBarHeight}}px + 100rpx)">
<view class="pageNavContent flexBetween" style="margin-top: {{statusBarHeight}}px">
<image class="shopLogo" src="/images/1.png" style="width:{{shopLogoSize}};height:{{shopLogoSize}}"></image>
<view class="shopName overflowHidden1" style="left:calc(50% - {{shopNameWidth / 2}}px - {{shopNameDistance}})">帮礼挑</view>
<view class="shopLogo" style="width:{{shopLogoSize}};height:{{shopLogoSize}}"></view>
</view>
</view>
//正文样式
<view class="pageNavMain" style="padding-top: calc({{statusBarHeight}}px + 110rpx)">
<view>
样式文件:
.pageNavBg{position: fixed;z-index: 500;left: 0;width: calc(100% - 58rpx);padding: 0 30rpx;background: white}
.pageNavContent{font-size: 32rpx;height:100rpx;position: relative;}
.shopLogo{width: 72rpx;height: 72rpx;display: block;border-radius: 50%;}
.shopName{position: absolute;max-width: 220rpx;}
.pageMain{padding-bottom: 100rpx;overflow: scroll}
.flex{display: flex;align-items: center}
.flexBetween{display: flex;justify-content: space-between;align-items: center}
.overflowHidden1{ overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
js文件方法:
data参数:
statusBarHeight: getApp().globalData.statusBarHeight,
shopLogoSize:'0rpx', //店铺图像大小
shopNameDistance:'0rpx' , //店铺名距离店铺图像距离
shopNameWidth:'', //店铺名长度
页面滚动方法:
// 根据页面滚动触发导航顶部移动缩放动画
onPageScroll (e) {
let topHeight = parseInt(e.scrollTop);
if(topHeight>100 && topHeight< 200){
let shopLogoSize = ((topHeight - 100) * 72 / 100) + 'rpx';
let shopNameDistance = ((topHeight - 100) / 100) * (260 - Number(this.data.shopNameWidth)) + 'rpx';
this.setData({shopLogoSize,shopNameDistance})
}else if(topHeight <= 100){
this.setData({shopLogoSize:'0rpx',shopNameDistance:'0rpx'})
}else if(topHeight >= 200){
this.setData({shopLogoSize:'72rpx',shopNameDistance:(260 - Number(this.data.shopNameWidth)) + 'rpx'})
}
},
//获取标题长度
onLoad: function (options) {
var that = this;
var query = wx.createSelectorQuery();
query.select('.shopName').boundingClientRect(function (rect) {
that.setData({
shopNameWidth: rect.width
})
}).exec();
}
app.js文件获取设备信息方法
onShow: function() {
let that = this;
wx.getSystemInfo({
success: res => {
that.globalData.statusBarHeight = res.statusBarHeight;
let modelmes = res.model;
if (modelmes.search('iPhone X') != -1) {
that.globalData.isIphoneX = true
}
}
})
},