微信小程序 、taro3.x、uniapp 自定义导航栏头部、滑动渐变(仿小米Life小程序首页)

本文主要是介绍微信小程序 、taro3.x、uniapp 自定义导航栏头部、滑动渐变(仿小米Life小程序首页),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 前言
  • 一、效果(小米小程序)
  • 二 、我仿的效果
  • 三、代码逻辑
    • 1.index.jsx
    • 2.index.less
    • 3.index.config.js
  • 总结


前言

提示:一个小功能大致的逻辑:
1、自定义顶部导航栏:
(1)、随着需求不断的变化,小程序原生导航栏头部已不满足现在的社会的客户了
(2)、顶部导航栏我们可以获取手机系统的信息,完全可以适配其他手机的尺寸Taro.getSystemInfoSync()
(3)、看得出顶部导航栏由状态栏大小 + 小程序胶囊大小 + 胶囊距离状态栏高度 + 胶囊底部高度 = 总的高度,胶囊的信息获取 Taro.getMenuButtonBoundingClientRect()
2、功能渐变效果:
(1)、顶部背景颜色根据滑动的位置了渐变,用背景颜色background: rgba()
(2)、搜索框适配手机,默认原来的宽度 + 滑动距离的剩余的跨度
(3)、logo图标随着话滑动距离的大小渐变


提示:以下是本篇文章正文内容,下面案例可供参考

一、效果(小米小程序)

在这里插入图片描述

二 、我仿的效果

在这里插入图片描述

三、代码逻辑

1.index.jsx

代码如下(示例):

import { Component } from 'react'
import { View, Image, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
// import Taro, { Component } from "@tarojs/taro"
// import { AtButton } from 'taro-ui'
import topIcon from '../../assets/images/pay_type0.png'
import './index.less'export default class Index extends Component {constructor(props) {super(props);this.state = {totalHeight: "",	// 总高度statusBarHeight: "",	// 状态栏高度navBarHeight: 45,	// 导航栏高度windowWidth: 375,navStyle: "",navOpacity: 0,navInpWid: "",navRemain: "",widRemain: "",scrollTop: 0,imgOpacity: 1,};}componentWillMount () { const info = Taro.getSystemInfoSync()// 设置状态栏的高度this.state.statusBarHeight = info.statusBarHeightthis.state.windowWidth = info.windowWidth// h5 app mp-alipay// 获取胶囊的位置const menuButtonInfo = Taro.getMenuButtonBoundingClientRect()// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏的高度) = 导航栏的高度this.state.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight) + 4this.state.windowWidth = menuButtonInfo.leftthis.state.widRemain = (info.windowWidth / 375 * 70)this.setState({navInpWid: this.state.windowWidth - this.state.widRemain,navRemain: this.state.windowWidth - this.state.widRemain,totalHeight: this.state.statusBarHeight + this.state.navBarHeight})}onPageScroll(e) {let topHeight = e.scrollTop, navOp = 0navOp = topHeight / this.state.totalHeight;let mobileTop = this.state.navRemainthis.setState({navOpacity: navOp,navInpWid: navOp > 0 ?  mobileTop + (this.state.widRemain * navOp) : this.state.navRemain,imgOpacity: navOp <= 1 ? 1 - navOp : 0})const styles = `background: rgba(255, 255, 255, ${navOp});`this.setState({navStyle: topHeight > 10 ?  styles : ""})}render () {const {totalHeight, navBarHeight, statusBarHeight, windowWidth, navStyle, navOpacity, navInpWid, imgOpacity} = this.statereturn (<View className='index'><View className='top_navbar'><View className='top_pos' style={`height:${totalHeight}px`}></View><View className='navbar-fixed' style={navStyle}><View style={`height:${statusBarHeight}px`}></View>{/* <View style={{height: statusBarHeight+'px'}}></View> <View className='navbar-content' style={{height: navBarHeight+'px', width:windowWidth+'px'}}> */}<View className='navbar-content' style={`height:${navBarHeight}px; width:${windowWidth}px`}><Image style={`opacity:${imgOpacity}`} className='top_icon' src='../../assets/images/pay_type0.png'></Image><View style={`width:${navInpWid}px`} className={navOpacity >= 1 ? 'nav_input nav_inp_ac' :'nav_input'}></View></View></View></View><View style='width: 100%; height: 500px; background: #FE5804'></View><View style='width: 100%; height: 500px; background: pink'></View><View style='width: 100%; height: 500px; background: green'></View><View style='width: 100%; height: 500px; background: red'></View>{/* <AtButton type='primary'>按钮文案</AtButton> */}</View>)}
}

2.index.less

代码如下(示例):

.top_navbar{.top_pos{width: 100%;position: fixed;top: 0;left: 0;background-color: #FE5804;}.navbar-fixed{position: fixed;top: 0;left: 0;z-index: 100;width: 100%;.navbar-content {display: flex;align-items: center;justify-content: flex-end;height: 45px;padding: 0 20px 0 30px;box-sizing: border-box;position: relative;.top_icon{position: absolute;left: 30px;width: 50px;height: 50px;display: block;z-index: -1;border-radius: 50%;}.nav_input{width: 430px;height: 70px;border-radius: 40px;margin-bottom: 8px;background-color: #fff;}.nav_inp_ac{transition: all ease 0.3s;background-color: #F7F7F7;}.return_icon {width: 54rpx;height: 54rpx;margin-bottom: 4px;display: block;border-radius: 50%;}.return_icon2 {width: 22rpx;height: 38rpx;transform: rotateY(180deg);}}}
}

3.index.config.js

代码如下(示例):

export default {navigationBarTitleText: '',navigationStyle: 'custom',
}

总结

以上就是仿小米的效果内容,本文仅仅简单介绍了**Taro.getSystemInfoSync()** 的使用来适配,使用**Taro.getMenuButtonBoundingClientRect()** 等等api,逻辑并不是难

这篇关于微信小程序 、taro3.x、uniapp 自定义导航栏头部、滑动渐变(仿小米Life小程序首页)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/569314

相关文章

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

如何自定义一个log适配器starter

《如何自定义一个log适配器starter》:本文主要介绍如何自定义一个log适配器starter的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求Starter 项目目录结构pom.XML 配置LogInitializer实现MDCInterceptor

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt

Ubuntu设置程序开机自启动的操作步骤

《Ubuntu设置程序开机自启动的操作步骤》在部署程序到边缘端时,我们总希望可以通电即启动我们写好的程序,本篇博客用以记录如何在ubuntu开机执行某条命令或者某个可执行程序,需要的朋友可以参考下... 目录1、概述2、图形界面设置3、设置为Systemd服务1、概述测试环境:Ubuntu22.04 带图

Python程序打包exe,单文件和多文件方式

《Python程序打包exe,单文件和多文件方式》:本文主要介绍Python程序打包exe,单文件和多文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python 脚本打成exe文件安装Pyinstaller准备一个ico图标打包方式一(适用于文件较少的程

Druid连接池实现自定义数据库密码加解密功能

《Druid连接池实现自定义数据库密码加解密功能》在现代应用开发中,数据安全是至关重要的,本文将介绍如何在​​Druid​​连接池中实现自定义的数据库密码加解密功能,有需要的小伙伴可以参考一下... 目录1. 环境准备2. 密码加密算法的选择3. 自定义 ​​DruidDataSource​​ 的密码解密3