首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

原生JS实现可折叠导航栏

其中内容中需要一个按钮用来控制折叠。...但在代码中,并不能真的用for循环来做,那样在移动过程中js就会一直卡在循环中而不能执行其他代码,所以这里可以使用setInterval函数来做,它会每隔一段时间调用一次某个方法,格式为setInterval...为了使移动更平滑,每次调用时只移动到目标位置之间的距离的10%.实现折叠的函数代码如下: /*关闭/打开导航*/ function closeNav(nav,body,navTargetWidth){...nav.getBoundingClientRect().width == navTargetWidth){ clearInterval(CWLN); } } 调用时机为触发指定事件时调用,这里事件分为,点击按钮...当点击按钮后,判断当前导航栏是收缩还是展开状态,如果是收缩状态就将导航栏的宽和内容块的左外边距逐渐增长为展开时的值,反之同理。而判断是通过一个变量来标识导航栏状态实现。

7.3K20

如何实现文本内容折叠并显示“...查看全部”?

wintc.top/laboratory/#/ellipsis 一、需求描述 长度不定的一段文字,最多显示n行(比如3行),不超过n行正常显示;超过n行则在最后一行尾部显示“展开”或“查看全部”之类的按钮,点击按钮则展开显示全部内容...二、实现原理 纯css很难完美实现这个功能,所以还得借助js来实现,实现思路大体相似,都是判断内容是否超过指定行数,超过则截取字符串的前x个字符,然后然后和“...查看全部”拼接在一起,这里的x即截取长度...第一次先以文本长度为截取长度,计算是否超过N行,没超过则停止计算;超过则取1/2长度进行截取,如果此时没超过N行,则在1/2长度到文本长度之间继续二分查找,如果超过则在0到1/2文本长度中继续二分查找。...$nextTick(() => checkLoop(0, this.textLength)) }, // 展开按钮点击事件向外部emit clickBtn (event) {...四、其它 1、支持html串的考虑 现在的实现方案并不支持内容是html文本,如果需要支持HTML文本,问题将复杂许多。主要在于HTML字符串的解析和截断,不像文本字字符串那么简单。

4.7K20

【Flutter 专题】137 图解自定义 ACEFoldTextView 折叠文本

和尚在学习 Flutter 过程中,有特别需求是对于文本过长的内容需要展示固定行数,而在文本右下角有提示用户点击展开和收起;和尚尝试自定义一个可折叠收缩的 ACEFoldTextView; ACEFoldTextView...和尚首先简单梳理了一下设计流程,如下图所示; 当文本内容所占据行数小于等于限制的最大行数时,默认展示整个文本内容,不会有【展开/收起】; 当文本内容所占据行数大于限制的最大行数时,默认展示最大行数内容...,并在右下角显示【展开】提示; 点击【展开】区域时,当文本内容最后一行内容与【展开】区域占据内容宽度之和小于最大宽度时,默认展示【收起】; 点击【展开】区域时,当文本内容最后一行内容与【展开】区域占据内容宽度之和大于等于最大宽度时...透明渐变【展开/收起】 和尚整体通过 Stack 层级嵌套方式在右下角显示可点击的【展开/收起】文本区,为了提高显示效果,并防止完全遮挡内容文本,和尚尝试了两种方式来实现颜色透明度渐变; 1.1...Text 文本内容折叠 和尚想实现文本折叠,首先需要预先得知 Text 文本在范围内占据的行数,一般都需要通过 TextPainter 等方式获取;和尚尝试了两种方式进行判断; 2.1 TextPainter.didExceedMaxLines

1.2K20

js点击按钮返回页面顶部

03:08:28 在进行官网一类的网站建设时,经常会出现页面太长的现象,当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条,用户体验相当不好,于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮,点击该按钮返回顶部...即给最顶部的div设置一个id,然后a标签的链接地址写成该id,当点击时就会返回顶部,但是缺点为过于突兀,因为是立即返回顶部。...点击a标签即会返回到顶部div所在位置 再来看第二种方式 第二种方式相对来说比较人性化,看起来也比较舒服,直接先来看代码吧 落帆亭博客专注web前端开发 <a class...).animate({scrollTop:0},1000); return false; }); a标签的样式和方式和第一种方式相同,只不过给其添加了一个点击事件...,此事件需要进入jquery.js文件,点击之后滚动条会有一个滚动过程,不是一下子回到顶部,个人感觉不错。

25K10

点击显示更多文本自定义控件

写在前面的话: 在正常项目流程中,我们很多情况下会碰到点击显示更多文本,这样可以利于页面变化加载,点击显示更多可能会非常常用,现在博主利用自己的闲暇时间来一点一点完成一个自定义控件,这个控件可以满足大多数情况的需求...思路: 在写程序的时候,最需要的是思路,好的思路是成功的一半,我们来看看我们的最基本的需求效果: 1、需要在文字特别多的情况下显示只有确定的行数 2、点击右侧图片将所有的文字显示出来 3、文字在左侧覆盖大部分布局...,图标在右侧点击显示更多 4、显示的文本不会因为重用优化视图从而发生状态错位 实现需求: 1、继承LinearLayout: public class ExpandableContainer extends...* 自定义显示更多文本 */ public class ExpandableContainer extends LinearLayout { //默认的点击图标 private static...isExpanded; // 变化的TextView private TextView textView; // 点击扩展的图标 private ImageView imageView; // 显示文本

84930

技巧:文本超过N行折叠内容并显示“...查看全部”

wintc.top/laboratory/#/ellipsis 一、需求描述 长度不定的一段文字,最多显示n行(比如3行),不超过n行正常显示;超过n行则在最后一行尾部显示“展开”或“查看全部”之类的按钮,点击按钮则展开显示全部内容...多行文本超过指定行数折叠 二、实现原理 纯CSS很难完美实现这个功能,所以还得借助JS来实现,实现思路大体相似,都是判断内容是否超过指定行数,超过则截取字符串的前x个字符,然后然后和“...查看全部”拼接在一起...第一次先以文本长度为截取长度,计算是否超过N行,没超过则停止计算;超过则取1/2长度进行截取,如果此时没超过N行,则在1/2长度到文本长度之间继续二分查找,如果超过则在0到1/2文本长度中继续二分查找。...$nextTick(() => checkLoop(0, this.textLength)) }, // 展开按钮点击事件向外部emit clickBtn (event) {...支持HTML串的考虑 现在的实现方案并不支持内容是HTML文本,如果需要支持HTML文本,问题将复杂许多。主要在于HTML字符串的解析和截断,不像文本字字符串那么简单。

2.6K10
领券