小程序自定义导航之标题随页面滚动左右移动动画效果_小程序自定义底部导航动画效果-优快云博客

在这里插入图片描述默认状态下标题居中

在这里插入图片描述屏幕上滑标题向左移动图像变大
屏幕上滑到设定值图像大小固定，标题位置固定

代码如下：
页面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
        }
      }
    })
  },