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


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 跨域访问问题解决方法
Dec 02 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 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 中文和编码判断代码
2010/05/16 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
Javascript继承机制详解
2017/05/30 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
详解python单元测试框架unittest
2018/07/02 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
Python3.5运算符操作实例详解
2019/04/25 Python
python递归下载文件夹下所有文件
2019/08/31 Python
python ubplot使用方法解析
2020/01/10 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
大学校庆策划书
2014/01/31 职场文书
公民授权委托书范本
2014/09/17 职场文书
小班下学期个人总结
2015/02/12 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python