小程序中实现自定义胶囊样式的方法是什�
Admin 2022-06-08 群英技术资�
本文实例为大家分享了微信小程�自定义左上角胶囊样式的具体代码,供大家参考,具体内容如下
1� 将app.js 中的 window 对象属性navigationStyle 改为自定�
"window": { "navigationStyle": "custom" },
改完之后的效�:
2、获� 右上角胶囊的定位信息 设置
调用 wx.getMenuButtonBoundingClientRect() 函数得到右上角胶囊定位信�
所需要的 属性有 � top,height属性,用于计算自定义左上角胶囊定位的位�
拿到 右上角胶囊的 top和height 相加得到 屏幕导航栏的固定高度:
� data函数中声明一个导航栏高度属性,和一� 胶囊具体定位的top属�:
赋值导航栏的高� 数据:
// pages/testQ/index.js Page({ /** * 页面的初始数� */ data: { navHeight:0, capsuleTop: 0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { let dwObj = wx.getMenuButtonBoundingClientRect() let navHeight_ = (dwObj.top + dwObj.height) let capsuleTop_ = dwObj.top this.setData( { navHeight: navHeight_, capsuleTop:capsuleTop_ } ) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函� */ onReachBottom: function () { }, /** * 用户点击右上角分� */ onShareAppMessage: function () { } })
� wxml 中定� 导航�:
<!--pages/testQ/index.wxml--> <!-- 左上角胶囊开�--> <!--left-capsule 是最上层,可以设置背�--> <view class="left-capsule"> <!--left-capsule-nav 是用于定位左上角的位�--> <view class="left-capsule-nav" style="height:{{navHeight}}px;"> <!--left-capsule-nav-content � 胶囊主要内容--> <view style="position:relative;top:{{capsuleTop}}px;" class="left-capsule-nav-content"> <!--back 胶囊 返回按钮--> <view class="back"> <!-- 我这个图标引入的� vant库的icon,如果不是使用vant的话 得自定义一个icon--> <van-icon name="arrow-left" color="white" size="20"/> </view> <!-- line 胶囊 中间线条--> <view class="line"></view> <!-- home 胶囊 返回首页按钮--> <view class="home"> <!-- 我这个图标引入的� vant库的icon,如果不是使用vant的话 得自定义一个icon--> <van-icon name="wap-home-o" color="white" size="20"/> </view> </view> </view> <!-- 以上 可以 封装成自定义组件,在引入,这个地方� 胶囊外的内容--> <view class="main-content" style="top:{{navHeight}}px;"> 我是测试左上角胶� </view> <!-- 左上角胶囊结�--> </view>
wxss内容:
/* 导航栏css开�*/ .left-capsule{ width: 100vh; height: 100vh; background-color: black; } .left-capsule .left-capsule-nav{ width: 100%; position: fixed; z-index: 2; } .left-capsule-nav .left-capsule-nav-content{ width: 85px; text-align: center; border-radius: 50px; position: relative; top: 26px; left: 20px; box-shadow:0px 0px 1px 0.2px white; background-color: #1d19195c; height: 30px; } .left-capsule-nav-content view{ display: inline; width: 35px; position: relative; } .left-capsule-nav-content .back{ top: 4px;left: -5px; } .left-capsule-nav-content .line{ top: 3px; width: 1px; border-left: solid #cac3c3 thin; height: 17px; display: inline-block; } .left-capsule-nav-content .home{ top: 4px; } /* 导航栏css结束*/ /* 内容*/ .main-content{ background-color: red; position: absolute; width: 100%; z-index: 1; }
效果�:
如果觉得红色地方太挨得进的话 top 在加大一�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
移动端页面适配,rem和vw适配,本文主要介绍了vue项目中使用rem替换px的实现示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
这篇文章主要为大家详细介绍了vue实现顶部左右滑动导航,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
mixins(混入)官方的描述是一种分� Vue 组件中可复用功能的非常灵活的方式,这篇文章主要给大家介绍了关于vue中混� mixins使用的相关资�,需要的朋友可以参考下
Vue会尽可能高效地渲染元�,通常会复用已有元素而不是从头开始渲染。这么做会使Vue变得非常�,下面这篇文章主要给大家介绍了Vue基础教程之条件渲染和列表渲染的相关资�,需要的朋友可以参考下
javascript能增加标签,方法�1、使用“document.createElement("标签�")”语句创建新标签节点�2、使用insertBefore()或appendChild()函数在指定子元素节点前或后插入新标签节点�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078