首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

vue返回上一页面时回到原先滚动的位置

项目结束,测试时发现在首页商品列表中,向上滑动几页后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试不通过说是用户体验不好,要求从哪里点击进去返回该页面时回到原先的滚动页面。...思路:因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为: (1).在App.vue中加入: ...component: index, meta: { keepAlive: true } }, 这样在index.vue中,mounted方发只走一次,在浏览器上实现了返回原来滚动位置的目的...但是在手机上测试,发现没用, 解决手机上实现目的的方法: //在页面离开时记录滚动位置 beforeRouteLeave (to, from, next) { this.scrollTop =...document.documentElement.scrollTop || document.body.scrollTop next() }, //进入该页面时,用之前保存的滚动位置赋值 beforeRouteEnter

3.1K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    一篇文学会商用可编辑问卷表单制作【iVX 十二】

    二、页面编辑页制作及功能编写 2.1 表单标题栏制作 2.2 编辑区内容制作 2.3 点击组件按钮添加元素到表单中 2.4 编辑组件标题与删除添加的组件 2.5 保存添加组件的内容 2.6 动态更改组件的属性...表单内容是通过一个编辑页动态生成,页面效果如下: 该页面可以使用左侧的添加表单选项,为需要填写的表单添加动态的选项内容,并且添加后的表单内容可以更改每一行的标题、或者是背景色;添加的下拉菜单页可以为其增加选项内容...: 接下来为调色板添加事件,当调色板颜色改变时触发,选择对象属性设置行为当前选中序号,列为背景色,所更改的颜色则为选中的颜色: 随后预览选中需要更改背景色的行,此时点击调色板将会改变其背景色:...,此时我们与动态表单生成时操作一致,当元素内容改变时进行数组内的数据更改,由于从动态添加表单页复制到当前界面,此功能已存在并不需要改动,我们直接为提交按钮添加事件即可。...与提交用户一致的情况下更改删除字段为 1: 最后返回是否成功即可: 5.4 结束表单页的功能编写 我们再创建一个已结束表单页,该页可以下载表单统计数据: 该页面与自己的表单页的区别在于功能按钮的不同

    6.7K30

    用 PyQt 打造具有专业外观的 GUI

    例如,如果要为给定的应用程序创建首选项对话框,则可能需要向用户显示基于选项卡或多页的布局,其中每个选项卡或页面都包含一组不同的紧密相关的选项。...每次用户单击选项卡或页面时,应用程序都会显示一组不同的小部件。...使用QStackedLayout对象时要记住的重要一点是,您需要显式提供一种在页面之间切换的机制。否则,您的布局将始终向用户显示同一页面。...这样,当用户更改组合框中的选项时,堆叠版式上的页面将相应地更改。 在第25行上,创建QStackedLayout对象。...当您在窗口顶部的组合框中选择一个新页面时,布局将更改以显示所选页面。 除了堆叠的布局和堆叠的小部件,您还可以使用QTabWidget创建多页用户界面。您将在下一节中学习如何操作。

    2.8K30

    最新iOS设计规范四|3大界面要素:视图(Views)

    一、动作表单(Action Sheets) 动作表单是一种特定的警示样式,它表示与当前上下文有关的两个或多个选择。在较小的屏幕上,动作表单会从屏幕底部向上滑动。...警示框标题和内容 尽可能写一些短小的、描述性比较强的多文本警告标题。屏幕上需要阅读的文字应该越少越好,可以尝试编写一个标题并且避免添加额外的信息。...集合的布局是可以随时更改的。但需要注意的是,如果你是在用户进行查看集合或者正在与之进行交互时来更改动态布局的话,请确保更改是有意义的且是易于跟踪的。...如果某行支持删除并且有助于提供清晰性,请将系统提供的删除标题替换为自定义标题。 在用户做出选择时给予相应的反馈。用户在与列表进行交互时,希望被点击的列表可以突出显示。...使用网页视图让用户在不离开APP当前页的情况下,短暂地访问网站很好,但Safari是用户在iOS上浏览网页的主要方式。所以在你的APP中提供与Safari相似的功能没有必要的,而且也不鼓励这样做。

    8.5K31

    101种让你的网站更棒的方法

    选择一种标题字体和段落字体,再有就是特殊例子的字体。 设置网页body字体大小为16px。在大显示器上难以阅读比这小的字号。移动设备的字号则缩为12px。...在表单上添加HTML5验证[HTML5 validation],以便于用户可以更清晰的意识到自己在尝试提交存在错误的表单。...然而一旦你丢失了你的站点,你就可能需要一个网站文件的备份来恢复它。 精彩的内容 定义个性化的404错误页,它将会在每当用户想要访问不存在的页面时被展示出来。...在网站里放一些让用户自愿加入的表单是不错,但专门搞一个只有自愿加入表单的高转换率页面同样是个聪明的做法。如果有人想订阅,链接到那个页面。...当用户采取某些指定的行动的时候,网站就应当展示出一个登录页模板。 如果你想卖点东西,首先确认你有一个好看的销售页。以一个大标题开始,并且为销售模块留够空间,也可以添加一个销售视频。

    1.3K40

    xwiki功能-页面编辑

    用户可以方便地在他们的个人资料上(在你登录的时,在页面的右上方)选择编辑模式。这样,普通用户可以在不了解系统的情况下,对编辑模式之间进行选择。...他们可以到他们用户的个人资料页面上选择切换高级模式(见下图)。...选择一个语法 在编辑页面时,可以选择要使用的语法(见XWiki语法指南了解详细介绍)。在wiki编辑模式下,可以在右侧信息面板中选择当前页面要使用的语法。...设置父页面 从XWiki7.2开始,设置父页面的概念已被弃用,取而代之的是新的嵌套文档功能。一个页的位置不再由“parent”域控制。为了改变页面的位置,你现在需要重命名或移动到另一个位置。...页面名称在URL使用而标题是用来显示页面的简短说明。查看页面时,标题是用来作为一个页面顶部的标题。 页面标题可以在wiki或WYSIWYG模式下编辑文件时进行设置。

    2.2K10

    django 1.8 官方文档翻译: 1-2-2 编写你的第一个Django应用,第2部分

    探索管理功能 现在我们已经注册了 Poll ,那 Django 就知道了要在管理网站的首页上显示出来: 点击 “Polls” 。现在你在 polls 的 “更改列表” 页。...Save and add another – 保存更改并载入当前对象类型的新的空白表单。 Delete – 显示删除确认页。...你将看到一页列出了通过 Django 管理界面对此对象所做的全部更改的清单的页面, 包含有时间戳和修改人的姓名等信息: 自定义管理表单 花些时间感叹一下吧,你没写什么代码就拥有了这一切。...这样的话你就需要在注册对象 时告诉 Django 对应的配置。 让我们来看看如何在编辑表单上给字段重新排序。...上面那特定的更改使得 “Publication date” 字段在 “Question” 字段之前: 仅有两个字段不会令你印象深刻,但是对于有许多字段的管理表单时,选择一个直观 的排序方式是一个重要的实用细节

    2.5K40

    小程序界面设计指南

    纠正示意: 避免并列过多操作让用户选择,在不得不并列多个操作时,需区分操作主次,减轻用户的选择难度。...减少输入 由于手机键盘区域小且密集,输入困难的同时还易引起输入错误,因此在设计小程序页面时应尽量减少用户输入,利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。...安卓手机自带的硬件返回键执行“返回”上一级页面的操作。 安卓导航存在一类特殊情况:当用户通过操作区的菜单将小程序添加至安卓桌面,刚打开小程序的首页时,不展示导航区,仅展示标题和操作区。...启动页加载 小程序启动页突出展示小程序品牌特征和加载状态。启动页除品牌标志(Logo)展示外,页面上的其他所有元素如加载进度指示,均由微信统一提供且不能更改,无需自行开发。...页面全局操作结果—结果页 对于操作结果已经是当前流程的终结的情况,可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成,并可根据实际情况给出下一步操作的指引。

    4.5K70

    CSS编写规范

    2、目前我司在编写CSS样式时存在编写混乱、多页面的样式写在同一CSS文件、不方便阅读等几乎毫无原则的现象,产生诸多弊端,罗列如下: 1)多个页面的样式写在同一个CSS文件中: 加载一个页面同时把其他页面的...CSS文件中: 导致每次都需要重新编写,延长了项目制作时间 每次编写的并不统一,造成一种布局有多套做法,包括对其进行操作的js编写 不便于统一进行样式更改 不便于交接 3)表现与结构没有分离——频繁使用行内样式与以...相关原则有: 1、常用控件、表格、布局和页面做出一套或者多套模板 单选、复选框、按钮、轮播图的上一张/下一张按钮等,应该根据不同场合提前做好一套或者数套模板,每次使用这些控件时应该在这些模板的基础上进行相应更改...常用页面如详情页和含有大量表格的页面的CSS样式应写到各自独立的CSS文件中制作成模板,以后每次使用时直接调用即可。...7、引入CSS文件应在html页面的顶部引入 能加快页面内容显示;并能避免页面产生白屏,和网速过慢时避免让用户看到没有经过样式修饰的html代码。

    2.7K30

    Web测试检查清单

    2、数据输入 2.1、表格输入 1、接收到非法输入时是否能恰当处理 2、该输入是可选输入还是必填输入 3、输入超过允许长度的数据 4、页面装载或重装载后默认值 5、组合框中的数据可以正常选择和更改 6、...3、面包屑导航是否存在 4、确保在未保存当前页面时离开页面有用户提示信息 3.2、链接 1、检查站点地图中的所有链接并查看是否存在损坏的链接 2、确保所有链接的目的地址跟标题描述相符 3、确保没有孤儿页面...、字体 1、确保整个网页产品中字体设置的一致性 2、确保字体放大时页面布局不被破坏 3、确保所有字体设置的易读性 4、确保不同类型内容在同一页面显示时尽量选用不同字体 4、内容、图片、按钮 4.1、内容...、选择框要测试其限制条件是否符合需求文档(例如:页面用户名输入限制为4-20字符,但需求文档限制条件为6-16字符,不符合需求文档要求) 3、信息提交时,对必填及非必填项的输入验证 4、检验表单输入提示...11.3、压力测试 1、同时在线的用户数量超多多少时,页面出出现响应时间过长打开不开等 2、压力测试的区域包括表单、登陆和其他信息传输页面等

    1.6K10

    🈲Eclipse通过jdbc连接数据库制作简单登陆界面【新手必看】

    下面进入项目 二、配置Tomcat服务器 需要先配置jdk环境变量并且安装Tomcat,可能需要制定jre目录,这里一般都是自动检测出来的,前往不要当作tomcat安装目录给更改了,保持默认下一步才是选择安装目录...可以删掉,这是自动生成的; 第8行:设置页面标题“登陆界面”; 第12行:二级标题“快速登陆”,对齐方式“居中”,一共有6级标题(h1-h6); 第13行:form表单,名称为“form1”,提交表单后执行的动作是跳转到...第18行:文本框“username1”,用来输入用户名,他的值取上一个页面提交到此页面的“username1”元素。...characterEncoding=utf8&useSSL=false"; //MySQL配置时的用户名 String user = "root"; //Java连接MySQL配置时的密码 String... 内容简单的很,就一个显示用户名的效果,中间可以嵌入java代码,对上一页面传来的参数username1进行解码输出。

    1.1K10

    【Java 进阶篇】深入了解 Bootstrap 插件

    您还可以更改轮播指示符的样式、轮播控制按钮的图标等,以满足您的项目需求。 Bootstrap 模态框(Modal) 模态框是一个常见的插件,用于在网页上显示对话框、提示框或表单。...用户可以点击按钮来展开菜单,然后选择菜单项来执行操作。 自定义下拉菜单 下拉菜单可以根据不同的设计需求进行自定义。您可以更改菜单项的样式、内容、触发按钮的样式等。...您还可以更改分隔线的样式、菜单项的颜色等,以满足您的项目需求。 Bootstrap 标签页(Tab) 标签页是一个常见的插件,用于在网页上创建多个选项卡,用户可以切换不同的内容。...这个基本的标签页结构包含了标签页导航和不同选项卡的内容。用户可以点击选项卡来切换到不同的内容。 自定义标签页 标签页可以根据不同的设计需求进行自定义。您可以更改选项卡的样式、内容、默认活动选项卡等。...您还可以更改选项卡的样式、内容和切换效果,以满足您的项目需求。 Bootstrap 表单验证 表单验证是一个重要的前端功能,用于确保用户在提交表单时提供有效的数据。

    27730

    用低代码开发简易的小程序技术教程

    ,点击应用管理,点击创建空白应用按钮 新建应用的时候选择普通应用,输入应用名称和标识 7步骤三 开发页面 应用创建好后我们就需要开发页面,默认会给创建一个首页,需要再创建两个页面,签到页和签退页。...切换到组件页签,分别添加两个标题组件 修改标题的内容为如下,主要是修改标题的内容、级别和颜色 接着我们添加一个栅格布局,用来放置导航图标 修改栅格布局的列比例为6:6,列间距为150 然后修改一下栅格布局的样式...,文字内容修改为签退 修改容器组件的事件,页面改到qiantui 这样首页就开发好了 7.2签到页的开发 切换到页面管理,选择签到页面 切换到组件视图,先添加一个导航栏组件 修改一下导航标题为签到...,打开展示返回图标的配置 给导航栏组件增加一个返回事件,选择平台方法的返回即可 导航栏组件配置好后,往页面中添加一个表单容器组件 给表单容器增加submit提交事件,先选择签到的数据源 然后在传入参数那点击数据绑定...,使用表达式的方法进行绑定 提交事件设置好后,我们增加一个数据创建成功后的事件 数据创建成功后我们就返回到首页 剩下就依次在表单容器里加入表单输入组件,日期的话可以选择表单日期组件方便用户录入

    2.5K40

    微信公众号自动回复图文消息

    ”填写“URL”和“Token”(用上一步得到的URL和自己填的Token),随机生成EncodingAESKey,选择“明文模式”,提交 (提交成功后会返回上一页)启用服务器配置,面板状态会变成“服务器配置...订阅:新增关注时触发 比如添一条测试规则: 回复标题 test 关键字 测试,test,t 触发 普通 发布 勾选 类型 纯文本 内容 hoho...:随机选取几篇文章 搜索关键字:站内搜索结果 最有用的应该是搜索关键字,能把用户想要的博文列表丢过去,当然基础功能也不错 三.优化搜索结果 试玩发现回复结果与查询关键字的相关度不大,比如: 关键字 redux...,po文件 __wechatsucks__.php # 黑科技,token验证不通过时可以试试 _edit.php # 和下面3个都是后台页面及配置表单 _general.php _history.php..._settings.php ajax_request_handle.php # 配置表单需要的博文列表,现查 class-wpwsl-general.php # 注册新增规则页 class-wpwsl-history.php

    4.1K20

    活动可视化搭建系统——你的KPI被我承包了

    动态表单用于根据不同组件特性生成对应配置表单。最后打包并优化多页面,每个页面单独配置域名,一个负责内部编辑、一个负责对外展示。通过活动id获取对应活动JSON数据动态渲染在活动展示页面。...多页面流程: ? 关于最后的活动页面展示除了多页面外其实还有特别多种方案可选,选择最合适自己业务的就好,后边内容会细说这几种展示方案。...比如不同主题的标题、按钮、都可以单独封装出来直接用于拼装。 ?...但把请求node服务拿配置的方式改成了访问本地json文件,并在落地页的归属上做了一些调整。步骤如下: 1.将lego分为两部分:编辑系统、落地页,配置多页面打包。...2.活动搭建系统在一定意义上可以解决90%的简单页面,但复杂的多页面联动的活动还是无法做到。

    1.2K30

    【云加小程序2018年4月】更新日志

    【优化】响应小程序用户授权改动,全面更改授权方式 2.【增加】增加领取优惠券时可选获取用户手机号 3.【修复】修复个人中心收藏商品销量为NULL的bug 4....【增加】万能表单增加多行文本 4.【增加】会员中心菜单可更改文字,并修复不显示问题 5.【增加】分销商申请页面顶部海报 06.【增加】“分销商”名称自定义 07....【修复】修复积分兑换插件上拉显示空数据的问题 20.【修复】修复多规格商品弹出购买层按钮遮挡 21.【优化】优化地址添加页面按钮颜色和样式 22....【修复】修复多栏目筛选页默认选择全部 3.【修复】修复多栏目筛选页图片不显示的问题 4.【修复】修复多规格商品购买按钮不显示的问题 5.【修复】修复商品列表显示多规格商品 6....入驻分类 6,修复收藏的帖子不能打电话 7 ,优化提现详情页面样式 8、优化城市选择页面 9、新增后台帖子搜索功能 10、优化其他小BUG问题 2018.04.23 版本号:8.0 1、优化多城市选择页面

    1.4K40

    html学习

    属性:高度 超链接标签 a 超链接标签连接的空间可以不经过对方允许,直接打开 防盗设置 超链接是无法直接访问的,当你访问该页面时,我会进行先行判断,先获取你的上一个链接地址,判断这上一个链接地址是不是从我当前的服务器内部发起的...--需要配合js事件使用--> input标签 readonly设置该标签值为只读标签,用户无法手动更改,数据可以正常提交...js进行事件绑定,submit相当于input的submit功能,reset相当于input的reset功能 from中有两个属性action method action是将表单数据提交到那个页面 method...是传输数据的方法get和post Get将数据拼接到地址栏中,get相对不安全 ,get提交数据量有限 Post不会将数据拼接到地址栏将数据上传到请求体中 相对安全,理论上是无限的 尽量使用post方式提交表单...样式、js脚本 元标签 charset字符集 utf-8 还可以设置很多; 标题标签--->窗口标题 主体标签 躯干标签:存放的是页面中需要展示的内容

    1.5K10

    Spread for Windows Forms快速入门(3)---行列操作

    开发人员可以定义用户与行和列的交互,如是否可以更改行或列的大小、是否可以移动行或列、冻结指定的行或列、在行或列中查找数据等。 更改行或列的大小 你可以允许用户重新调整表单中行或列的大小。...用户要重置行或列的大小,仅需鼠标左键单击行首或列首的边界线,拖拽至所需位置释放鼠标。 如下图所示,当左键被按下时,鼠标位置就会显示一个工具栏。 一定要点击列的右边缘或行的下边缘以改变列宽或行高。...为移动行或列,用户仅需要左键按住行或列的头部,在行首(列首)区域内向前或向后拖拽,至所需位置放开鼠标。 (如果拖拽多行或多列,要事先选中欲操作的行或列)。...当使用表单工作时,你可以利用表单类中的各种不同成员来找出行或列最后一个或者格式的索引。...对于重载了GetPreferredColumnWidth方法的表单类,当重载允许你选择包含或不包含标题的单元格时,始终会有一个重载包含标题的单元格。

    2.5K60

    在 Laravel 控制器中进行表单请求字段验证

    在 Web 应用中,用户提交的数据往往是不可预测的,因此一个非常常见的需求是对用户提交的表单请求进行验证,以确保用户输入的是我们所期望的数据格式。...作为一个灵活的框架,Laravel 提供了多种方式对表单请求进行验证,你可以在控制器中通过 $this->validate() 方法验证用户请求,也可以通过单独的表单验证类定义验证规则,再将其注入到相应的控制器方法...响应(错误码为 422),如果是正常的 POST 表单请求的话,会重定向到表单提交页,并包含所有用户输入和错误信息,以便重新渲染已填写表单并显示错误信息。...在表单页面显示错误信息 我们需要修改下 form.blade.php 中的表单代码,在 Blade 模板中可以通过 $errors 获取验证错误信息,通过 old() 辅助函数可以获取用户上次输入数据:...,底层的处理方式也是一样,所以其它地方的代码都不需要做任何更改。

    5.8K10
    领券