【小程序】导航栏和内容页面联动效果实现

news2024/11/24 4:34:09

💭💭

✨: 微信小程序导航栏和页面联动

💟:东非不开森的主页

💜: 因为很多东西来不及去做去看可是时间很快总是赶不上,所以要去成长呀💜💜

🌸: 如有错误或不足之处,希望可以指正,非常感谢😉

应用场景:页面和上方导航栏联动

  • 我们可以考虑使用轮播图
  • 在小程序中呢,不同机型内容高度不一样,所以我们需要动态获取
  • 然后这个高度动态的放在轮播图里面


为什么需要获取高度?

因为我们滑动的时候要在任意位置都可以滑动,而每种机型是不一样的,所以我们需要动态的获取机型的内容高度,并且动态展示

  • 这个高度可以在app.js中全局获取,那么无论那个页面都可以使用

在这里插入图片描述

  • 使用这个高度,添加到swiper上面

在这里插入图片描述

  • 轮播图部分

在这里插入图片描述
在这里插入图片描述

  • 导航栏部分

在这里插入图片描述

  • css部分

在这里插入图片描述

效果
请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/53622.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

React—— HelloWorld

React 学习笔记Hello WorldJSX (JavaScript XML) 语法规则JavaScript 语法函数组件、类组件 & 属性 props组合组件生命周期函数 & 状态 state事件处理refs受控组件、非受控组件 & 高阶函数、函数的柯里化npm参考Hello World <!DOCTYPE html> <html lang&…

Request请求转发与Respones请求重定向有什么区别?

目录&#xff1a; 1.Request请求转发 2.Respones请求重定向 3.关于转发和重定向的路径问题 1.Request请求转发 请求转发(forward)是一种在服务器内部的资源跳转方式。 (1)浏览器发送请求给服务器&#xff0c;服务器中对应的资源A接收到请求 (2)资源A处理完请求后将请求发…

在html中使用js实现图片的无缝滚动(四种状态)

文章目录js原理实施任务1.从左往右无缝滚动代码示例运行效果2.从右往左无缝滚动代码示例运行效果3.从上往下无缝滚动代码示例运行效果4.从下往上无缝滚动代码示例运行效果js原理 获取整个ul和ul下面的所有li&#xff0c; 把ul里面的li内容添加一份&#xff0c;因为需要完成图片…

【加油站会员管理小程序】01需求分析

随着这两年微搭产品的迭代,目前组件基本够用,像常用的支付这种功能也是有的,因此我们就可以结合现有功能来完成一个实际使用的小程序的开发。 我们本次的实战课,是以加油站的业务场景为出发点,涵盖会员的开通、充值、消费、积分兑换等常用场景。结合实战案例,我们完整的…

12月2日:thinkphp中的链式操作

补充内容&#xff1a; 今天我们就来聊聊limit和page的区别以及group by需要注意的点&#xff0c;where和having的区别 limit和page 区别 Limit 限制查询数量&#xff0c;在进行分页查询的时候用的最多&#xff0c;但是limit在查询限制中的索引值是从0开始的&#xff0c;lim…

基于Java+Springboot+Vue+elememt疫情返乡人员管控系统设计实现

博主介绍&#xff1a;✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取联系&#x1f345;精彩专栏推荐订阅收藏&#x1f447;&…

一文搞懂如何学习Android内部命令行工具集合

目录 1.安卓命令工具集 2.命令如何使用&#xff08;举例&#xff09; 2.1 am命令使用 2.2 dumpsys 命令使用 2.3 wm命令用法 2.4 rm命令的用法 2.5 logcat 命令的用法 2.6 cat 命令的用法 3.个人如何学习 3.1 推荐学习方法一 3.2 方法二 1.安卓命令工具集 安卓支持…

JMeter入门教程(7) --思考时间

1.人物背景 在JMeter脚本中&#xff0c;思考时间使用定时器模拟实现的 2.任务目标 掌握基于JMeter性能测试脚本开发——思考时间 3.任务实操 3.1 固定定时器 右击取样器&#xff0c;选择“添加 > 定时器 > 固定定时器&#xff0c;如图示&#xff1a; 2.固定定时器页…

手机无线耳机什么牌子的好用?2022好用的无线蓝牙耳机排行榜

现如今的蓝牙耳机市场中有着多种机型&#xff0c;不同功能&#xff0c;不同价格的蓝牙耳机数不胜数&#xff0c;一部手机、一副耳机似乎已经成为了人们外出的搭配。那么手机无线耳机什么牌子的好用呢&#xff1f;下面我来给大家推荐几款好用的无线蓝牙耳机&#xff0c;大家可以…

团队协作利器----API接口Eolink

本文目录&#xff1a;一、初识Eolink1.什么是Eolink2.我与Eolink的故事二、Eolink突出特点----团队协作协同工作分享协作支持所有类型API文档、测试方便导出接口文档方便查看历史记录三、Eolink优势总结前言&#xff1a; hello大家好&#xff0c;我是Dream&#xff0c;在我们的…

安卓中adb命令工作的底层原理及使用举例

目录 1. adb安卓调试桥 2.adb的组成 3.adb命令的使用举例: 3.1什么是应用包?什么是应用界面? 3.2 adb 命令如何获取应用应用包名和应用界面名? 1. adb安卓调试桥 adb的全称为Android Debug Bridge&#xff0c;就是起到调试桥的作用。通过adb我们可以在Eclipse中方便通过…

c程序从编译开始到运行结束的过程

重温c语言 我们在linux平台下建立一个a.c文件,程序很简单&#xff0c;显示输出Please input your name:&#xff0c;然后让我们输入名字&#xff0c;最后调用了一个子函数输出hello,我们的名字 #include<stdio.h>void hello(char * name);int main(){char name[16]{0};p…

(4E)-TCO-PEG4-acid,1802913-21-8物理性质分享

(4E)-TCO-PEG4-acid物理数据&#xff1a; CAS&#xff1a;1802913-21-8| 中文名&#xff1a;(4E)-反式环辛烯-四聚乙二醇-羧酸 | 英文名&#xff1a; (4E)-TCO-PEG4-acid 结构式&#xff1a; 英文别名&#xff1a; (4E)-TCO-PEG4-COOH TCO4-PEG4-COOH 中文别名&#xff1a…

【Flink】一文解析Flink如何实现状态管理和容错机制

文章目录一 Flink中的状态管理1 有状态的算子和应用程序&#xff08;1&#xff09;算子状态&#xff08;operator state&#xff09;&#xff08;2&#xff09;键控状态&#xff08;keyed state&#xff09;2 状态后端3 选择一个状态后端二 Flink中的容错机制1 一致性检查点&am…

自建传奇2服务器,分享自己架设传奇服务器的详细介绍

我们在经历了太多的传奇私服之后就会有人想要自己搞一个来看看&#xff0c;其实有这样想法的人其实还是很多的&#xff0c;毕竟当一个玩家总没有当一个GM来的实在。于是就有人选择自己去架设传奇私服的服务器&#xff0c;而这个时候我们的信息就能够给这些想要自己当GM的人一个…

uniapp多端问题总结

页面跳转相关 1、页面跳转传参报错 问题&#xff1a; 小程序报错 SyntaxError: Unexpected end of JSON inputat JSON.parse () 原因&#xff1a;是由于JSON.parse无法识别某些url中的特殊字符比如&等特殊符号。解决办法&#xff1a; 原来代码&#xff1a; // 跳转所属专…

【Linux】—一文掌握Linux基本命令(上)

目录lspwdcdtouchmkdirrmdir与rmmantree 的安装cpmvnano的安装catls 语法&#xff1a; ls [选项][目录或文件] 功能&#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出文件名以及其他信息。 常用拓展选项&#xff1a; -a 列出…

J-Tech Talk|以型搜型:3D模型表征助力3D神经搜索!

以型搜型指的是 以3D模型搜索3D模型&#xff0c;在对 3D 物体进行模型表征后&#xff0c;通过最近邻搜索得到与之类似的3D物体的结果。Executor-3d-encoder 项目集成了若干个 3D 物体表征模型&#xff0c;开发者可以很方便地对不同的模型进行统一配置、训练和微调。12 月 6 日晚…

网上中国:“云签约”,真方便

文章目录“云签约”&#xff0c;真方便足不出户就能签合同电子签名行业发展迅速确保合同不被篡改“云签约”&#xff0c;真方便 通过线上面签&#xff0c;商品房买卖双方不见面就能完成交易流程&#xff1b;有了电子劳务合同&#xff0c;企业用工实现一键签约&#xff1b;借助…

体验 Node.js 的 net 模块

1. 创建客户端 模拟 http 请求&#xff0c;将接收到的响应体内容原样输出&#xff0c;接收完毕后&#xff0c;关闭连接 1.1 最终效果 接收到的数据&#xff1a; 解析后的数据&#xff1a; 1.2 流程说明 初始化&#xff1a; 创建客户端 const client net.createConnection…