前端手写顶部模块独占一行太多显示不下时出现左右按钮

最新推荐文章于 2022-11-08 16:17:52 发布
最新推荐文章于 2022-11-08 16:17:52 发布
阅读量256 收藏
点赞数
分类专栏： css 文章标签： css3 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45380518/article/details/119782420
版权
这个博客内容展示了如何使用前端组件库实现左右滑动导航功能。通过`<a-icon>`元素结合`v-if`和`@click`指令进行左右箭头的显示与点击事件处理，以及通过`v-for`遍历`navtabList`来展示内容。导航条目可以在有限的空间内以溢出隐藏的方式展示，允许用户通过滑动查看全部内容。
摘要由CSDN通过智能技术生成

<a-icon type="left" style="margin-top:4px;cursor: pointer" @click="leftRemove" v-if="leftShow"/>
    <div style="max-width:417px;white-space:nowrap;overflow:hidden;">
        <div class="textBox" :style="{'margin-left':rightPx}" style="white-space:nowrap;overflow:hidden;display:flex">
            <p style="display:flex;margin-bottom:0px;width:140px;" v-for="val in navtabList" :key="val.type">
                    <p  v-if="!val.rename" style="display:block;width:100px;text-overflow:ellipsis; overflow:hidden;margin-top:-21px;margin-left:20px;margin-right:3px">
                        内容
                    </p>
            </p>
        </div>
    </div>
 <a-icon type="right" v-if="rightShow" style="margin-top:4px;cursor: pointer" @click="rightRemove"/>

 

7777777的7
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Python实现手写文字识别
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
10-23 4万+
基于Python实现手写文字识别，对学生日常作业及考试试卷中的手写内容进行自动识别，实现学生作业、考卷的线上批阅及教学数据的自动分析，提升教职人员工作效率，促进教学管理的数字化和智能化。
前端手写(十一)——手写数组的map方法
weixin_47450807的博客
03-30 2247
一、写在前面 数组的map方法，其中需要传入两个参数，第一个是一个回调函数，第二个是一个回调函数的this指向的值。 二、手写 在手写map方法时，我们需要注意如下问题。 1、回调函数必须是一个函数 2、调用该方法的对象必须是数组。 3、如果数组的大小为0，则直接返回空数组。 Array.prototype.myMap = function (callback, thisArg) { let length = this.length let res = [] if (!Array.isArra
移动端导航过多，点击导航左右滚动回弹
weixin_30950237的博客
11-15 401
移动端导航过多，点击导航左右滚动回弹 移动端项目导航栏目很多，需要左右滑动，前面文章，已经实现，跳转页面也实现了，现在问题是，当点击后面的导航栏目时候，聚焦当前的时候， 需要给当前导航添加一个动画回弹的效果，也就是，让后面的导航，慢慢的移动到可视区域位置 ----------------------------------HTML--------------------------...
一行放不下足够的盒子
Simple的博客
03-19 314
ps:刚开始学前端，仅用来记录方便自己回顾，有错的地方，欢迎指正。 常因为父盒子不够大 而放不下足够的li 此时不动固定的div宽度 而是把div里面的ul宽度改的足够放下li 即/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了*/ <div class="box-bd w"> <ul> <li></li> <li></li
CSS一行排不下自动打断换行
sunshineSQ的博客
09-05 1645
web前端偶尔会遇到文字太多一行拍不下造成溢出的情况，简单的解决办法就是在样式表里面加上：word-wrap:break-word
HTML标签分类！
LmissL的博客
09-06 189
css分类标准： 按照HTML分类： 文本级: p、span、a、b、i、u、em、img（文本内容，图片，链接，纯文本都可以装进去） 容器级: div、 h系列、li、dt、dd（里面可以装标签，表格，ul，li，p） 按照css分类： 行内元素:所有的文本级标签，都是行内元素，除了p, p是个文本级，但是是个块级元素 块级元素: 所有的容器级标签都是块级元素 元素转换： 块级元素转换为行内元素：display：inline 行内元素转换为块级元素：display：block 行内块元素：dis
前端学习（十）导航栏功能优化
lsjweiyi的博客
07-29 1038
上篇实现了基本的导航栏功能，还有几个体验上的问题： 首先他没法看出来当前选中了哪个页面，没点明显的提示 只有点击文字才能路由，点边边那些位置是不行的 过于简单，没有复杂的嵌套 本篇就改善这些问题。 解决第二个点击文字才能路由的问题 查着查着资料，发现第二个问题先解决。原来el-menu自带有router属性，设置该属性后就能自己路由了，不需要再引入router-link，所以代码改成下面这样： <template> <div id="app" style="margin: 0"&g
前端手写(六)——获取url参数
weixin_47450807的博客
03-27 2107
一、写在前面 获取url参数是我们开发中常用到的方法，所以下面我们进行手写一个这样的方法。 二、手写 function getParams(url) { let res = {} if (url.includes('?')) { let str = url.split('?')[1] let arr = str.split('&') for (let item of arr) { let key = item.split('=')[0] let
前端手写(三)——手写深拷贝
weixin_47450807的博客
03-26 4505
一、写在前面 深拷贝就是对对象的深度拷贝，假如我们对象中的字段值任然是对象，如果使用浅拷贝，则只能拷贝对象的地址。实现深拷贝存在三种方法: 1、使用JSON.stringify和JSON.parse方法 2、手写一个深拷贝函数。 3、使用第三方库lodash。 下面我们将详细总结一下第一种和第二种。 二、JSON.stringify和JSON.parse方法 const obj = { name: 'Jack', address: { x: 100, y: 200 } } let
前端手写(十五)——手写new的过程
weixin_47450807的博客
03-30 3302
一、写在前面 我们如果想要手写new的实现过程，就必须要明白，当我们对一个构造函数执行new操作时，到底干了什么。 1、创建一个新对象。 2、让这个新的对象的原型指向该构造函数的原型对象。 3、执行构造函数，并且将构造函数指向新的对象。 4、拿到构造函数最后返回的结果，判断是否是对象或者函数，如果是的话，则直接 返回。如果不是则返回新创建的对象。 二、手写过程 function createNew(con) { let result = Object.create(con.prototype) l
js文本内容显示6行，超出6行出现显示更多按钮，css样式超出行数只能使用...去替代
肖帅的博客
06-20 4829
js处理文本内容显示6行，超出6行出现显示更多按钮，对于网上说的css样式处理，基本上都是超出6行使用…去处理，不符合需求，先看结果，再看需求：如下 先看实现结果，如下图所示： 需求：产品经理提出详情信息中默认只展示6行，超出6行后，显示“展示更多”按钮。 分析：小编接到这个需求也是一脸懵，经过几天的闲时思考，终于实现！对于网上说的css样式处理，基本上都是超出6行使用…去处理，不符合需求，所以还得分析，如下 1，宽度不定（移动端），高度不定，文本内容不定（文字可以是汉子，字母，数字等），几乎什么都不确
前端学习-Bootstrap
听闻
01-29 850
一、 什么是Bootstrap Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并自定义你的网站。 参考地址: 官网： https://getbootstrap.com/ 中文网: https://www.bootcss.com/ 菜鸟教程: https://www.runoob.com/bootstrap4/bootstrap4-tut
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
qq_52925863的博客
10-21 2642
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
前端常用布局及实现方法（想到就更）
柯南的博客
05-05 798
使子元素处于父元素的中心位置； 元素内子元素水平居中均匀分布（可换行）； 把父元素分割为四(n)块等宽的区域（栅栏布局）； 表单标签右对齐、内容左对齐实现； 左边导航栏+右边内容页实现； 左右固定宽度，中间撑满剩余空间实现； 版权声明固定在浏览器底部实现； 导航栏固定在浏览器顶部实现；
文字和icon组件显示在同一行
weixin_44277207的博客
08-28 1516
文字和icon组件显示在同一行
uniapp中使用uview组件u-icon 编辑到微信小程序样式问题
最新发布
qq_44367273的博客
11-08 3722
在微信小程序中用u-icon标签选择器才能对其设置样式，但在h5预览中u-icon{ }这样设置样式不生效，用组件的customStyle属性才生效。
文本超过指定行数折叠
携手天下
11-18 1268
多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求，网上也有人实现过类似的功能，不过还是想自己写写看，于是就写了一个Vue的组件，本文简单介绍一下实现思路。 组件可以通过npm安装使用，需要的同学可以尝试一下： 组件地址：https://github.com/Lushenggang/vue-overflow-ellipsis 在线体验：https://wintc.top/laboratory/#/ellipsis ...
关于带有"显示更多"按钮的多行文本截断思考
weixin_38129930的博客
09-17 1057
点击上方蓝字关注，回复"1"加入「前端交流群」刚好最近遇到这个小需求，记得很早之前都是用JS处理，毕竟那时候年少无知。切换类的操作可以用checked伪类实现，成本会比较...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值