微信小程序tab栏切换高度自适应

2023-06-09 02:38| 来源: 网络整理| 查看: 265

微信小程序tab栏切换高度自适应-代码模板（直接复制即可）原创

wx5e2da121398ee 2023-06-01 17:56:42 博主文章分类：微信小程序 ©著作权

文章标签小程序 js 搜索生命周期 xml文件文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者wx5e2da121398ee的原创作品，请联系作者获取转载授权，否则将追究法律责任

微信小程序tab栏切换高度自适应-代码模板（直接复制即可）_搜索

有搜索栏（不要搜索框的话删除wxml文件中的搜索view板块即可）

微信小程序tab栏切换高度自适应-代码模板（直接复制即可）_xml文件_02

效果图

wxml文件代码：

全部酒席待办酒席已办酒席的撒旦水水1 的撒旦水水的撒旦水水的撒旦水水的撒旦水水的撒旦水水的撒旦水水的撒旦水水的撒旦水水的撒旦水水的撒旦水水的撒旦水水的撒旦水水的撒旦水水的撒旦水水的撒旦水水的撒旦水水

wxss文件代码：

/* pages/index/index.wxss */ page { background: #fafafa; } .header{ padding-top: 10rpx; } .mun { border-top: 1px solid #fafafa; background: #fff; display: flex; justify-content: space-around; } .mun>span { width: 100%; text-align: center; padding: 18rpx; padding-bottom: 27rpx; font-size: 32rpx; position: relative; } .bor { color: #fc6e12; } .bor::after { content: ""; height: 9rpx; background: #fc6e12; width: 100%; position: absolute; bottom: 0; left: 0; } /* 搜索框 */ .com-search { width: 680rpx; height: 90rpx; /* border: 3rpx solid #eee; */ background: rgba(215, 213, 215, 0.8); margin: 0 auto 10rpx; position: relative; border-radius: 34rpx; } .com-search input { width: 540rpx; height: 80rpx; font-size: 26rpx; position: absolute; outline: none; /* border: 1px solid blue; */ padding-left: 40rpx; top: 0; bottom: 0; margin: auto 0; } .com-search button { width: 110rpx !important; height: 100%; background: #fc6e12; font-size: 25rpx; position: absolute; right: 0; top: 0; bottom: 0; margin: auto 0; border-radius: 0 34rpx 34rpx 0; overflow: hidden; } .com-search text { border-radius: 0 34rpx 34rpx 0; display: block; width: 100%; height: 90rpx; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACWklEQVRYR7VWy1VVQRCsikCIQIlAiADcuEUiUCIQIhAjUCMQIhDWLJQI1AjECIQI2lMw806/fvO793D7nLu6M9PV1dUfYsDM7A2AQwAvAOwC2AJwB+AXgFsAlySvBp7aOMLWJTM7A/A+Oey9L0AnJC96B/3/IgAzU5TfUsRT3tNZsXJEUsx0bQNAovvrYNQ1B2LjFUmBadoagBT594LzvwA+p1yvIjMzaUL6OAHwPHgaArECYGYS1p+C848kpYWmJb18CIfEgJgQmKJ5AIpQgvN2TPK85zz/N7N3AJQ+b80AHgAkKhW9t1OSAjXJzEzp+OQuKfqdGgsZQLz0m6QqYZaZmXTiNVFlMgNQrl46byqjy1neHxmNqbgiKbFuWAZg7s89SQlytiVB//MPkCz2HBYO35A8mO09XYxpaAGQM9V+tqcC8APAvnt3uyREMSCx/VwAwJquqgzIsZl5DdyS3HmCFPg30QMQy2ZvpI/XQKZ5omGWrVrWuQpiF/xCUr1hlpmZuudbd7naDTOAKETdncWCmU16y8+CqNruIIn0VAZatQnpvgdQQj68XDSWGM2B6nIS94E4EwRSw0QakS42xmoaZMp3aWR3p2lpI4oC8kyLkbyIqn/kJbUk1muSr3sqru2EiiYuF723Sv+nM5BfSWoW9X5K9kDcA3gWDjVBNNfy1CU1WjVKJdL4uI7IqUa3PlWSvgi6vQ/0wgqs+ON3sWOmUhwG0WVgFJw/NwXEIgBS6rTUdJlYDMAoiEUBNEBIO9trrXhOrkfvFDSx2jsXZ8BVUNaEuudBrp7/qsANMJ9z0bcAAAAASUVORK5CYII=) 50% 50% no-repeat; background-size: 34%; position: absolute; top: 0; left: 0; } /* 主体内容 */ .content { height: 600rpx; background: #fafafa; position: fixed; } .content-info { height: 220rpx; background: rgb(87, 87, 87); margin-top: 34rpx; }

js文件代码：

// pages/index/index.js Page({ data: { height: "", munStyle: ['bor', '', ''], searchContent: "" }, /** * 点击键盘上的搜索 */ bindconfirm: function (e) { console.log("搜索内容 " + this.data.searchContent) }, /** * 点击菜单操作 */ getContentData: function () { console.log("点击了菜单") // 发送请求获取数据 }, /** * 记录搜索框输入的数据 */ searchInput: function (e) { console.log(e.detail.value) this.setData({ searchContent: e.detail.value }) }, /** * 点击头部tab选项卡 */ clickMun: function (e) { var mun = e.currentTarget.dataset.num; var munStyleList = this.data.munStyle; for (let index in munStyleList) { if ((mun - 1) == index) munStyleList[index] = 'bor'; else munStyleList[index] = ''; } this.setData({ munStyle: munStyleList }) switch (mun) { case '1': this.getContentData(); break; case '2': this.getContentData(); break; case '3': this.getContentData(); break; default: console.log('菜单不存在'); } }, /** * 设置内容区域高度自适应 */ setHeightContent: function () { var that = this var query = wx.createSelectorQuery() query.select('.header').boundingClientRect(function (res) { // 获取头部view的高度 var resHeight = res.height wx.getSystemInfo({ // 获取网页高度 success: function (res) { let windowHeight = (res.windowHeight * (750 / res.windowWidth)); resHeight = (resHeight * (750 / res.windowWidth)); console.log("屏幕高度可用:" + windowHeight + "rpx"); console.log("内容区域可用高度" + (windowHeight - resHeight) + "rpx") console.log("内容区域距离顶部高度" + resHeight + "rpx") that.setData({ height: windowHeight - resHeight //网页高度 - 头部高度 }) } }) }).exec(); }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { this.setHeightContent(); }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

json文件代码：

{ "usingComponents": {}, "navigationBarTitleText": "酒席单" }

赞收藏评论分享举报

上一篇：Docker安装Nginx+FTP访问静态资源

下一篇：IDEA插件-自动生成 Controller service mapper 等

【本文地址】

公司简介

联系我们