移动端如何设计一个比较友好的Header组件？

最新推荐文章于 2022-09-11 10:39:34 发布
最新推荐文章于 2022-09-11 10:39:34 发布
阅读量265 收藏
点赞数 1
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckXinXin/article/details/108594903
版权

当时的思路是头部(Header)一般分为左、中、右三个部分，分为三个区域来设计，中间为主标题，每个页面的标题肯定不同，所以可以通过vue props的方式做成可配置对外进行暴露，左侧大部分页面可能都是回退按钮，但是样式和内容不尽相同，右侧一般都是具有功能性的操作按钮，所以左右两侧可以通过vue slot插槽的方式对外暴露以实现多样化，同时也可以提供default slot默认插槽来统一页面风格

LuckXinXin
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue开发音乐移动端实战(1) —header头部组件开发和swiper轮播图开发 以及利用JSONP获取QQ音乐轮播图数据
z1455841095的博客
06-20 1525
首先做项目配置 安装babel-polyfill这是es6语法转化（在路由中引用的）babel-fastclick 去除移动端click点击的300毫秒延迟（在路由中index.js下写入）import fastclick from 'fastclick'//引用 fastclick.attach(document.body)//挂载到body元素上better-scroll 滚动插件（组件中引用...
如何在Android应用里对HTTP请求头部添加适当的User-Agent字段
TOM专栏
10-14 4148
一般Web浏览器在访问各个网站时，会在HTTP请求的Header里设置User-Agent字段，表示请求者的身份信息，比如在我华为U9200的Android手机上，打开Chrome浏览器后，每个访问请求的User-Agent字段如下： ? Mozilla/5.0 (Linux; Android 4.0.3; U9200 Build/HuaweiU9200)
android 添加头参数,Retrofit添加header参数的几种方法
weixin_42519985的博客
05-26 1884
(1)使用注解的方式添加一个Header参数publicinterfaceUserService{@Headers("Cache-Control:max-age=640000")@GET("/tasks")Call>getTasks();}添加多个Header参数publicinterfaceUserService{@Headers({"Accept:application/vnd...
移动端web头部header通用写法
weixin_30896763的博客
04-12 1043
1.head部分通用写法；网上也有，不过有的可有有的可无；原理是兼容IOS透明栏目等问题，再者就是viewport（关键）<headlang="en"><metacharset="UTF-8"><!--优先使用IE最新版本和Chrome--><metahttp-equiv="X-UA-Compatible"content="IE=ed...
HTTP协议中的“报头”(header)和 “正文“ (body)详解
crazy_xieyi的博客
09-11 1万+
请求“报头”(header)、请求 “正文“ (body)以及响应 “报头“ (header)、响应 “正文“ (body)详解
一套完成的webui html5 移动端商城
02-08
”这句话意味着这个压缩包包含了一个完整的前端框架，设计用于构建移动端的电子商务平台。开发模板通常包括预设的布局、样式、交互元素以及基本功能，可以帮助开发者快速启动项目，节省时间并保持一致性。 【标签】...
vue开发移动端底部导航条功能
10-15
在`<template>`部分，可以看到一个包含三个主要部分的布局：头部导航(`g-header-container`)、内容区域(`g-view-container`)和底部导航(`g-footer-container`)。底部导航栏是由名为`Tabbar`的组件来实现的，这显示了...
vue实现移动端省市区选择
10-16
本文将详细讲解如何使用Vue实现一个移动端的省市区选择组件。 首先，要实现这个功能，我们需要安装一个名为`v-distpicker`的第三方库。这个库专门为Vue设计，提供了省市区三级联动的选择器。你可以通过以下命令安装...
H5移动端商城网站模板
04-17
在构建一个H5移动端商城网站时，涉及到许多关键知识点，这些知识点构成了用户友好的交互体验和功能完善的在线购物平台。以下是对标题“H5移动端商城网站模板”和描述的详细解读，以及相关的重要技术点： 1. **HTML5...
仿淘宝移动端的静态html5页面(比较全27个页面)
01-03
2. **响应式设计**：由于这些页面是针对移动端设计的，因此它们很可能采用了响应式布局。响应式设计允许网页根据用户的设备屏幕大小自动调整布局，确保在不同设备上都能提供良好的用户体验。 3. **CSS3**：为了实现...
移动端解决悬浮层（悬浮header、footer）会遮挡住内容的3种方法
01-19
在现在的前端页面中，尤其是移动端，经常会需要将<header>或者是<footer>模块悬浮出来，跟随页面的滑动保持定位在页面的最上方或者是最下方，如下图所示。 “回复主题”模块，就是跟随页面的浮动一直悬浮在页面的最下方，代码结构如下。 复制代码代码如下:…<section class=’footer’> <div class=’reply-topic’>回复主题</div></section>… 实现这样的功能当然是利用position:fixed。但是，使用position:fixed有一个bug，以悬浮<footer>在最下方为例（悬浮<header>同理），当页面滑到最下方的时
移动端的特殊头部布局
weixin_30457551的博客
07-09 124
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=320, maximum-scale=1.3, minimal-ui"> <meta HTTP...
移动端html头部设置
hugejihu9的专栏
10-19 2046
文章来自：源码在线https://www.shengli.me/css/82.html   代码：  
移动端头部标签(HTML5 Head Meta)
蜗牛小前的博客
11-18 2776
&lt;!DOCTYPE html&gt; &lt;!-- 使用 HTML5 doctype,不区分大小写 --&gt; &lt;html lang="zh-cmn-Hans"&gt; &lt;!-- 更加标准的 lang 属性写法 /2014th7cj/d/file/p/20160830/20797118 --&gt; &lt;!-- 声明文档使用的字符编码 --&gt; &lt;met..
【如何简单实现移动端布局】
szy01820的博客
02-28 284
如何简单实现移动端布局
Vue移动端组件开发系列之Header组件
qq_42760405的博客
04-16 705
技术要点： 1.是否显示下边框 2.返回按钮支持自定义跳转，默认跳转支持组件外埋点操作 3.支持右标题 代码如下： HTML代码 <template> <div class="header-bar" :class="{bd_line:showLine}" @touchstart.prevent > <div clas...
vue移动端头部组件
小剑儿的博客
07-19 3161
<template> <div style="height:50px;"> <van-nav-bar :title="title" left-text="" left-arrow :z-index="999" @click-left="onBack" > <van-icon name="user-o" slot="right" @clic...
移动端html 头部header代码示范
热门推荐
武当山道士的博客
07-22 1万+
"> //清缓存 //电话号码不显示为拨号连接； // 网站开启对web app的支持 //顶部状态条的样式 default 白色 black 黑色 black-translucent:半透明（若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px））
移动端图形化报表界面设计_移动端几种常见的界面设计布局
weixin_39927144的博客
12-20 1045
在日常产品交互设计中，有时候总会对界面的排版和布局的选择上很纠结，界面的排版布局直接影响了用户体验，选择一个合适的排版是值得持续打磨的事情。这里我画了几种移动端常见的页面布局和他们的各自特点：1，列表式布局2，陈列式布局3，九宫格式布局4，选项卡式布局5，轮播图式布局6，伸展式布局7，抽屉式布局8，弹出框式布局9，横向拓展式布局10、多面板式布局1，列表式布局70172CBC-B2FA-4920-...
实现一个vue移动端树形遍历组件
最新发布
04-29
一种常用的方式是使用递归组件，即在组件中嵌套自己，以实现无限层级的嵌套展示。 3. 在展示树形数据时，您可能需要考虑一些交互和样式方面的问题，比如可以添加展开/收起节点、高亮选中节点等功能，也可以借助第三...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值