微信小程序自定义胶囊样式


Posted in Javascript onDecember 27, 2020

本文实例为大家分享了微信小程序自定义左上角胶囊样式的具体代码,供大家参考,具体内容如下

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 在加大一点

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 Javascript
JS实现鼠标移动拖尾
Dec 27 #Javascript
JavaScript实现滚动加载更多
Dec 27 #Javascript
jQuery实现简单轮播图效果
Dec 27 #jQuery
JavaScript实现瀑布流布局的3种方式
Dec 27 #Javascript
Vue实现省市区三级联动
Dec 27 #Vue.js
JavaScript实现通讯录功能
Dec 27 #Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 #Vue.js
You might like
PHP header函数分析详解
2011/08/06 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
python排序方法实例分析
2015/04/30 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
详解python开发环境搭建
2016/12/16 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
python输出数学符号实例
2020/05/11 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
医生实习工作总结的自我评价
2013/09/27 职场文书
自考自我鉴定范文
2013/10/30 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
教师队伍管理制度
2014/01/14 职场文书
个人合作协议书范本
2014/04/18 职场文书
市场营销毕业求职信
2014/08/07 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
Go语言编译原理之源码调试
2022/08/05 Golang