微信小程序 计算导航高度、设置浮层位置

微信小程序写一个 浮层计算高度

点击按钮显示 浮层   点击每项做出对应的数据筛选  点击空白处 关闭浮层

做一个 筛选 显示数据

1、在appjs中获取导航高度

// 获取手机信息 --- 设置自定义头部
	getPhoneInfo: function(){
		const { statusBarHeight, platform } = wx.getSystemInfoSync()
    const { top, height } = wx.getMenuButtonBoundingClientRect()
   
    // 状态栏高度
    wx.setStorageSync('statusBarHeight', statusBarHeight)
    // 胶囊按钮高度 一般是32 如果获取不到就使用32
    wx.setStorageSync('menuButtonHeight', height ? height : 32)
    
    // 判断胶囊按钮信息是否成功获取
    if (top && top !== 0 && height && height !== 0) {
        const navigationBarHeight = (top - statusBarHeight) * 2 + height
        // 导航栏高度
        wx.setStorageSync('navigationBarHeight', navigationBarHeight)
    } else {
        wx.setStorageSync(
          'navigationBarHeight',
          platform === 'android' ? 48 : 40
        )
		}
	},

2、在页面获取导航高度、浮层显示的高度

html

<header headerOpt="{{headerOpt}}"></header>
<wxs src="../../../filter/urlFilter.wxs" module="filter" />
<view class="outer">
    <view class="firstPlatList">
        <view class="tabBox" wx:for="{{firstproductAreaList}}" wx:key="index" data-id="{{item.id}}" bindtap="clickTab">
           <view class="{{item.value == item.name ? '' : 'litext'}}"> {{item.value == ''? item.name : item.value}} </view>
           <view class="li {{TabShow!== item.id ? '' : 'liIconCur'}} {{item.value == item.name ? '' : 'liIconblue'}} "></view>
        </view>
    </view>
    //fixeHeight 浮层距离 
    <view class="tabConter" style="top:{{fixeHeight}}" wx:if="{{TabShow == 0}}">
        <view class="tabLi {{currentTab1 == item.id ? 'tabLiCur' : ''}}"  wx:for="{{Secondary}}" wx:key="index"
            data-current="{{index}}" bindtap="swichNav" data-name="{{item.name}}" data-type="{{item.id}}">{{item.name}}</view>
    </view>
    <view class="tabConter" style="top:{{fixeHeight}}" wx:if="{{TabShow == 1}}">
        <view class="tabLi {{currentTab2 == item.type ? 'tabLiCur' : ''}}" wx:for="{{rData}}" data-type="{{item.type}}" bindtap="clickCorp" wx:key="index" data-current="{{index}}" data-name="{{item.desc}}">{{item.desc}}</view>
    </view>
    <view class="tabConter" style="top:{{fixeHeight}}" wx:if="{{TabShow == 2}}">
        <view class="tabLi {{currentTab3 == item.code ? 'tabLiCur' : ''}}" wx:for="{{channelList}}" bindtap="clickChannel" wx:key="index" data-type="{{item.code}}" data-current="{{index}}" data-name="{{item.desc}}">{{item.desc}}</view>
    </view>
    <!-- <view class="nullHeight"></view> -->
</view>
<view class="bgColor" wx:if="{{bgShow}}" bindtap="clickMask"></view>

<view class="mine-container" style="margin-top: {{outerHeight}};">//outerHeight 距顶部距离
    <view class="lists" wx:if="{{tradeList.length>0}}" wx:for="{{tradeList}}" wx:key="index">
        <view class="dateTit">{{item.month}}</view>
        <view class="min-cont">
            <view class="cont_item" wx:for="{{item.list}}" wx:for-item="list" wx:for-index="listIndex" wx:key="listIndex" data-id="{{list.tradeId}}" bindtap="toDetail">
                <view class="contitem_top">
                    <text class="contop_left">{{list.typeName}}</text>
                    <view class="{{list.type == 1 ? 'contop_right1' : 'contop_right'}}">{{list.money}}</view>
                </view>
                <view class="contitem_bot">
                    <view class="conbot_left">
                        {{list.date}}
                    </view>
                    <view class="conbot_right">余额:￥{{list.balance}}</view>
                </view>
            </view>
           
          
        </view>
    </view>
    <view class="lists"  wx:if="{{tradeList.length==0}}">
       <view class="tr_none">
           <image src="{{filter.imgSassPath('/common/empty/empty-trade.png')}}"></image>
           <view class="tr_nonetext">暂无交易</view>
       </view>
    </view>
</view>

 js

import{ tradesList,channels } from '../../../utils/api/account/account.js'
Page({

    /**
     * 页面的初始数据
     */
    data: {
			headerOpt:{
				title:'test',
				showGoBack:true,
				showGoHome:true,
				styles:'background-color:#FFF;color:#1B1D24;',
			},
			isLogin: false,    
			firstproductAreaList:[
				{id:0, name:'aa', value:'aa'},
				{id:1, name:'bb',value:'bb'},
				{id:2, name:'cc',value:'cc'}
			],
			TabShow:-1,
			showBlack: -1,
			bgShow:false,
			currentTab1:0,
			currentTab2:'',
			currentTab3:'',

			Secondary:[{
				id:0,
				name:'全部'
			},{
				id:2,
				name:'aa'
			},{
				id:1,
				name:'bb'
			},{
				id:3,
				name:'cc'
			}],
			pageSize: 20,
			pageNum: 1,
			tradeList: [],
			totalNum:'',
			totalPages:'',
			isNotMore:false,//是否没数据
	},
	//点击 三个方式
	clickTab:function(e){
		let id = e.currentTarget.dataset.id
		//tabShow 0,1 2对应三个方式
		if(this.data.TabShow == id){
			this.setData({
				TabShow: -1,
				bgShow:false,
			})
		}else{
			this.setData({
				TabShow: id,
				bgShow: true,
			})
		}
	},
	//切换aa
	swichNav:function(e){
		let that = this
		this.setData({
			currentTab1: e.currentTarget.dataset.type,
			['firstproductAreaList[0].value']: e.currentTarget.dataset.name
		})
		this.hideTab()
	},
	//切换bb
	clickCorp(e){
		var id = e.currentTarget.dataset.type 
		this.getChannel(id);
		this.hideTab()
	},
	//切换cc
	clickChannel(e){
		let id =  e.currentTarget.dataset.type
		this.setData({
			currentTab3: id,
			['firstproductAreaList[2].value']: e.currentTarget.dataset.name
		})
		this.hideTab()
	},
	//获取aa
	getChannel(id){
		var rData = this.data.rData
		// console.log(rData);
		var obj = rData.find((item,index,arr)=>{
			return item.type == id
		})
		// console.log(obj);
		let arrlist= (obj&&obj.list)?obj.list:[];
		let desclist= (obj&&obj.desc)?obj.desc:'';
		this.setData({
			channelList: arrlist,
			currentTab2: id,
			['firstproductAreaList[1].value']: desclist
		})
	},
	//获取bb
	getpayType(id){
		var channelList = this.data.channelList
		var obj = channelList.find((item,index,arr)=>{
			return item.code == id
		})
		this.setData({
			currentTab3: id,
			['firstproductAreaList[2].value']:(obj&&obj.desc)?obj.desc:''
		})
		this.hideTab()
	},
	hideTab(){
		let that = this;
		this.setData({
			pageNum:1,
		})
		this.initData()
		setTimeout(()=>{
			that.setData({
				bgShow:false,
				TabShow: -1
			})
		},250)
	},
	// 初始化筛选条件aa，bb
	initChannel(){
		let that = this
		return new Promise(function (resolve,reject) {
			channels().then((res)=>{
				var obj = res.data.find((item,index,arr)=>{
					return item.type == that.data.currentTab2
				})
				that.setData({
					rData: res.data,
					channelList: obj.list||[]
				})
				resolve()
			})
		})
	},
	//初始化数据
	initData(){
		let that = this
		if(that.data.pageNum==1){
            that.setData({
                tradeList:[]
            })
        }  
		let params = {type:this.data.currentTab1,
		bankPayeeId:this.data.currentTab2,
		payMethodId:this.data.currentTab3,
		pageNum:this.data.pageNum,
		pageSize:this.data.pageSize
	}
		tradesList(params).then((res) =>{
			let lists = res.data.list
			lists=this.addsub(lists)
			let arrList =  this.initListArr(lists);
			that.setData({
				tradeList: arrList,
				totalNum:res.data.totalNum,
				totalPages:res.data.totalPages,
			})
			// wx.stopPullDownRefresh();
		})
	},
	// 格式化数据显示问题
	initListArr(newList){
		let arrList = [];
		let tradeList = this.data.tradeList;
		// 第一次加载 直接赋值
		if(tradeList.length == 0){
			arrList = newList;
		}else{
			// 后续加载 初始化数据
			if(newList.length>0){
				let oldTime = new Date(tradeList[tradeList.length-1].month.replace('年','/').replace('月',''));
				let yearTime = new Date(oldTime).getFullYear();
				let MounthTime = new Date(oldTime).getMonth();
				let newTime = new Date(newList[0].month.replace('年','/').replace('月',''));
				let yearTimeNew = new Date(newTime).getFullYear();
				let MounthTimeNew = new Date(newTime).getMonth();
				if(yearTime == yearTimeNew && MounthTime == MounthTimeNew){
					tradeList[tradeList.length-1].list = tradeList[tradeList.length-1].list.concat(newList[0].list);
					newList.shift();
				}
			}
			arrList = tradeList.concat(newList);
		}
		return arrList;
	},
	//处理￥方法
	addsub(arr){
		for(let i=0;i<arr.length;i++){
			let arrs=arr[i].list
			// console.log(arrs);
			for(let j=0;j<arrs.length;j++){
				arrs[j].money=this.mark(arrs[j].type)+'￥'+arrs[j].money
			}
		}
		return arr
	},
	//根据type判断 金额前+-
	mark(data){
		var mark = '-';
		switch (data){
			case '1':
				mark='-';
				break;
			case '2':
				mark='+';
				break;
			case '3':
				mark='+';
				break;
		}
		return mark
	},
	//跳转详情页
	toDetail(e){
		let tradeId = e.currentTarget.dataset.id
		wx.navigateTo({
		  url: '/pages/account/TransactionResult/TransactionResult?tradeId='+tradeId,
		})
	},
	clickMask(){
		this.setData({
			TabShow: -1,
			bgShow: false
		})
	},
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad:async function (options) {
			wx.hideShareMenu()
			console.log(options);
			await this.initChannel()
			if(options.bankPayeeId&&!options.payMethodId){
				this.getChannel(options.bankPayeeId)
			}
			if(options.bankPayeeId&&options.payMethodId){
				this.getChannel(options.bankPayeeId)
				this.getpayType(options.payMethodId)
				return
			}
			// 获取数据
			this.initData();
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {    
           // 计算高度
		let query = wx.createSelectorQuery()
        const that=this;
        query.select('.outer').boundingClientRect(function (res) {
			// console.log(res);
            that.setData({fixeHeight: res.height + wx.getStorageSync('statusBarHeight') + wx.getStorageSync('navigationBarHeight')+'px',
            outerHeight:res.height+'px'
            })
          }).exec()
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
		if((this.data.pageNum+1) > this.data.totalPages){  
			this.setData({
				   isNotMore: true
			 })
			return false;
	   }
	   
	   this.setData({
			 pageNum: this.data.pageNum+1
	   })
	   this.initData()

    },

    /**
     * 用户点击右上角分享
     */
    // onShareAppMessage: function () {

    // }
})