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

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

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

做一个筛选显示数据

1、在appjs中获取导航高度

// 获取手机信息 --- 设置自定义头部getPhoneInfo: function(){const { statusBarHeight, platform } = wx.getSystemInfoSync()const { top, height } = wx.getMenuButtonBoundingClientRect()// 状态栏高度wx.setStorageSync('statusBarHeight', statusBarHeight)// 胶囊按钮高度 一般是32 如果获取不到就使用32wx.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,})}},//切换aaswichNav:function(e){let that = thisthis.setData({currentTab1: e.currentTarget.dataset.type,['firstproductAreaList[0].value']: e.currentTarget.dataset.name})this.hideTab()},//切换bbclickCorp(e){var id = e.currentTarget.dataset.type this.getChannel(id);this.hideTab()},//切换ccclickChannel(e){let id =  e.currentTarget.dataset.typethis.setData({currentTab3: id,['firstproductAreaList[2].value']: e.currentTarget.dataset.name})this.hideTab()},//获取aagetChannel(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})},//获取bbgetpayType(id){var channelList = this.data.channelListvar 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，bbinitChannel(){let that = thisreturn 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 = thisif(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.listlists=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.idwx.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 () {// }
})

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

微信小程序获取视口高度,设置 video 视频全屏显示
微信小程序获取视口高度获取视口高度可用于设置视频全屏显示效果及其他效果显示 js中:(可以在onLoad中直接使用,或写入方法中) let that = this;// 获取系统信息wx.ge ...
[微信小程序]计算自己手机到指定位置的距离
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 目的: 根据目的地的坐标计算自己手机的位置离目的地的距离的核心思路: 后续操作必须等所有异步请求都返 ...
微信小程序：图片高度设置无效问题
控制台查看元素,显示其style中多了一个没有设置的高度值找了很久发现是因为image标签设置了mode="widthFix",此时高度会自适应,样式中设置高度无效
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏自定义微信小程序头部导航栏,有几种方式方式一 {"navigationStyle": "custom" // 将navigatio ...
微信小程序navigationBarTitleText导航栏标题设置
微信小程序navigationBarTitleText导航栏标题设置全局设置 app.json "window": { "navigationBarTextStyle& ...
微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度，防止标题栏高度歪歪扭扭
微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度一.微信小程序顶部导航栏自定义 "navigationStyle": "custom" app. ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...
微信小程序-自定义导航栏
微信小程序-自定义导航栏第一步添加属性 "navigationStyle": "custom" 第二步自定义导航栏第二步自定义组件第四步使用组件 ...
微信小程序自定义导航栏 navigation bar 返回键首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件版本号:2.0.0 作者:chen-yt github: https://g ...

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

1、在appjs中获取导航高度

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

html

js

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

最新文章

热门文章

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

1、在appjs中获取导航高度

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

html

js

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

最新文章

热门文章

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

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