laravel 5.4 改变了默认的数据库字符集，现在utf8mb4包括存储emojis支持。如果你运行MySQL v5.7.7或者更高版本，则不需要做任何事情。...当你试着在一些MariaDB或者一些老版本的的MySQL上运行 migrations 命令时，你可能会碰到下面这个错误： [Illuminate\Database\QueryException] SQLSTATE...Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes 我们可以在...AppServiceProvider.php 文件里的 boot 方法里设置一个默认值： <?
例如，我们可以在初始页面加载时显示10-30个产品项目（移动设备上显示10个，桌面设备上显示30个）。当用户到达列表末尾时，我们可以自动加载接下来的10-30个产品。...用户可能会更换到另一台设备上，或者在不同的时间段继续浏览，这解决了以后无法继续浏览的问题。...也许当前页码旁边添加v字形下拉按钮会使它更加明显。Pepper.pl图片 将分页和无限滚动结合在一个地方的一个很好的例子；唯一的改进可能是稍微更好的焦点样式和更好的可访问性导航跳转。...无限滚动清单 这里有一些设计时需要考虑的重要指南的列表可帮助设计更好的无线滚动： 如果有疑问，请始终选择分页。 使用无限滚动，始终集成页脚显示。 考虑从视觉上分离“旧”和“新”项目。...提供以后继续浏览的选项。 考虑使用“加载更多”+无限滚动一起。 考虑使用分页+无限滚动一起。 在加载新项目时更改URL，并将其公开给用户。 允许用户跳转到带有分页下拉列表的任何页面。
移动web滚动问题 在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的滚动，这时我们监听div的onscroll...在使用模拟滚动时，浏览器在js层面会消耗更多的性能去改变dom元素的位置，在dom复杂层级深的页面更为高，所以在长列表滚动时还要使用正常滚动更好。...即可，但是使用了模拟滚动之后在正常的列表滚动时性能上不如正常滚动。...tranlateY值，将两者同时位移来将下拉刷新元素显示出来，手指离开时（touchend）收回，这种方案满足了在正常列表滚动时使用原生的滚动节省性能，只在下拉刷新时使用模拟滚动来实现效果。...还会有一个性能上的问题就是：当页面的列表过长，dom元素过多时，在模拟滚动，下拉刷新这段时间内，页面也会有卡顿现象，这里采取了一个优化策略即： 列表较长时dom数量较多时，在触发下拉刷新的时机时将页面视窗之外的
一般用于在页面下面的时候，点击回到最上面。名称AAA可以随意区，只要是标记作用。 ...... alternate：在两端之间来回滚动 scroll：由一端滚动到另一端，会重复 slide：由一端滚动到另一端，不会重复 direction：设置滚动的方向 left |...="selected">下拉列表选项 multiple=”multiple”： 将下拉列表设置为多选selected=”selected...-- 下拉列表 --> 省(市) <!...3：方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)。 4：便于团队开发和维护。 怎么做？ 1：尽可能少的使用无语义的标签div和span。
一般用于在页面下面的时候，点击回到最上面。名称AAA可以随意区，只要是标记作用。 ...... alternate：在两端之间来回滚动 scroll：由一端滚动到另一端，会重复 slide：由一端滚动到另一端，不会重复 direction：设置滚动的方向 left |...下拉列表 下拉列表选项 下拉列表选项 multiple=”multiple”： 将下拉列表设置为多选 selected=”selected...3：方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）。 4：便于团队开发和维护。 怎么做？ 1：尽可能少的使用无语义的标签div和span。
Ctrl+向下箭头 或Ctrl+向上箭头：在有自动匹配下拉列表时，此快捷键会自动关掉下拉列表， 光标移动到下/上一行。...自动匹配下拉列表的排列方式的切换：在自动匹配下拉列表的右下角有个“π”图标，点击后可选 是按:实用性、字母两种排列方式。...Ctrl+F：搜索 Ctrl+句点：在自动匹配下拉列表中，选中第一个item 感叹号：在自动匹配下拉列表中，上下键选中一个返回结果为boolean的item，按感叹号会自动取反： Ctrl+Enter...:在自动匹配下拉列表中，在没有选中的item时，默认选中第一个item。...18.shift+鼠标滚动：可实现编辑界面的横向滚动。 19.Ctrl+Alt+V：调用方法时传入的参数是比较复杂的表达式时，可用此组合键重构变量，以简化代码的复杂度。 在组合键之前要先选中表达式。
Flex类作用介绍 类名 作用 d-*-flex 根据不同的荧幕设备创建弹性盒子容器 d-*-inline-flex 根据不同的荧幕设备创建行内弹性盒子容器 flex-*-row 根据不同的荧幕设备在水平方向显示弹性子元素...这个类仅适用于直接子列表项 (如果需要移除嵌套的清单项，你需要在嵌套的清单中使用该样式) / .list-inline 将所有列表项放置同一行 / .pre-scrollable 使 元素可滚动...如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 "hover"。 Scroll滚动监听 例： ) 必须匹配巡览列上的链接选项 ()。
QMUICommonListItemView 用作通用列表 QMUIGroupListView 里的 Item，也可单独使用。支持以下样式： 展示一行文字。 在右侧或下方增加一行说明文字。...QMUIGroupListSectionHeaderFooterView 用作通用列表 QMUIGroupListView 里每个 Section 的头部或尾部，也可单独使用。...QMUIObservableScrollView 可以监听滚动事件的 ScrollView，并能在滚动回调中获取每次滚动前后的偏移量。...QMUIListPopup 继承自 QMUIPopup，在 QMUIPopup 的基础上，支持显示一个列表。...QMUIStickySectionLayout 支持二级结构的列表的折叠与展开；支持滚动时悬浮当前 section header; 支持在section list 或 section item list
Columns：对列进行操作 DropTarget：可列表视图中项目是否以拖放操作的目标显示 FlatScrollBars：是否让滚动条有平滑的效果 FullDrag：当标签拖动时，是否重新绘制...：可在列表视图有焦点时获得用户输入的字符序列，列表视图添加字符串到查找字符串，并查找匹配的项 IsEditing：判断当前用户是否正在对项目进行操作 Scroll：可通过水平像素和垂直像素滚动列表视图的内容...该事件只有在OwnerData属性为True时才有效 OnDataHint：当列表视图的内容变化（如用户滚动列表视图）时发生 OnDataStateChange：当项目的范围改变状态时发生。...Scroll：页滚动组件滚动前立即产生 事件 OnScroll：当滚动时触发 TCommBoBoxEx 属性 DropDownCount：下拉列表中项目的最多个数 Images...：为下拉列表中的项目选择图片 ItemHeight：下拉列表中项目的高度 ItemsEx：对下拉列表中项目进行操作 SelText：选定的文本 Style：下拉列表框的样式 StyleEx
QuickRearrangeTableView - 基于UITableView的快速重排功能扩展子类。通过长按选定单元格然后滚动移动到指定位置。...类似美团的下拉菜单 - 类似美团的下拉菜单，源码推荐说明。 类似美团的下拉选项 - 类似于美团，大众点评的下拉菜单选项，code4app代码，评论代码有瑕疵。...BTNavigationDropdownMenu - 下拉列表暨导航标题组件。简单，直接，易用-swift。...VJDeviceSpecificMedia - 如何根据设备选择不同尺寸的图片 可以通过设置不同尺寸的设备的LaunchImage，来使用App适配这些设备，要在不同尺寸设备上使用不同大小的图片，则需要在代码中一一判断...DisplaySwitcher.swift - 两个集合视图在不同布局（平摊和列表）间平滑切换.Yalantis出品。
在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式(工作模式)。三. meta viewport 是做什么的？怎么写?...移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。...我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。...的宽度等于设备的宽度，同时不允许用户手动缩放。...定义下拉列表定义元素的细节定义外部交互内容或插件定义figure元素的标题定义媒介内容的分组，以及他们的标题<
约定编码规范 HTML约定： 在head中引入必要的CSS文件，优先引用第三方的CSS，方便我们自己的样式覆盖 在body末尾引入必要的JS文件，优先引入第三方的JS，注意JS文件之间的依赖关系，比如bootstrap.js...[endif]--> 3、视口 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示 目前大多手机浏览器的视口（承载页面的容器）宽度都是980...； 视口的宽度可以通过meta标签设置 此属性为移动端页面视口的设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1） width:视口的宽度 initial-scale:初始化缩放...——按钮式下拉菜单——按钮组——警告框——页头——分页——列表组——面板——媒体对象——进度条——Glyphicons——大屏幕——嵌入内容——内嵌 将日常使用的一些功能块，提前写好，我们使用时，直接找到对应的...（3）javascript插件 内置组件 模态对话框——下拉菜单——滚动监听——标签页——工具提示——弹出框——警告框——按钮——折叠面板——轮播图——吸顶效果
在移动端应用中，为用户提供一个直观的方式来更新内容是很重要的。...下拉更新的基础 下拉刷新是应用移动端中的一个常见模式，它允许用户手动刷新页面内容。在 Flutter 中，这个功能被封装在 RefreshIndicator 挂件中。...构建用于下拉刷新的小部件 为了实现下拉刷新，我们从可滚动挂件开始，比如 ListView 或者 ScrollView，这些将会是 RefreshIndicator 挂件的 child 内容。...RefreshIndicator 挂件应该覆盖在需要刷新的可滚动的内容上。还有很重要的一点需要注意，RefreshIndicator 只在垂直可滚动的 child 上才可工作，。...这个设计可保证整个列表都符合 pull-to-refresh 的动作。
关于响应式设计的思考： 根据响应式设计的理念，一个页面包含所有设备不同屏幕的样式和图片，当一个移动设备访问一个响应式的页面，就会下载pc，笔记本，ipad等不同设备对应的样式。...（4.0，4.1有，4.2修复没有了，4.4开始又出现了） 解决方案： 在touchmove中加入：event.preventDefault（），可fixedBug。...(3) 弹性滚动，下拉刷新 ①弹性滚动：当客户端的页面滚动到顶部或底部的时候，滚动条会收缩并让我们多滑动一定距离。通过缓冲反弹的效果，带给用户良好的体验。...但可以借助三方库iScroll来实现 ②下拉刷新：顶端下拉一小点距离，页面弹性滚动向下。...在手机上和平板设备上的版本，是创建移动web app的框架。
视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器...，将页面容器缩放到设备这么大，然后展示目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；视口的宽度可以通过meta标签设置此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，...Glyphicons标签徽章缩略图大屏幕嵌入内容内嵌JavaScript插件JavaScript插件的依赖情况如何使用Javascript插件内置组件模态对话框下拉菜单滚动监听标签页工具提示弹出框警告框按钮折叠面板轮播图吸顶效果...视口 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器...，将页面容器缩放到设备这么大，然后展示 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980； 视口的宽度可以通过meta标签设置 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度
Spinner Spinner是下拉框，用于从一串列表中选择某项。...spinnerMode : 下拉列表的显示样式，有dialog弹窗和dropdown下拉两种。不过考虑到用户体验，实际开发中一般用dialog。...setOnItemSelectedListener : 设置下拉列表的选中监听器。...headerDividersEnabled : 指定是否显示列表开头的分隔线。但实际开发中发现这个设置不起作用，即使该属性设置为true，开头也不会显示分隔线。...setHeaderDividersEnabled : 设置是否显示列表开头的分隔线。该方法实际上不起作用。 setFooterDividersEnabled : 设置是否显示列表末尾的分隔线。
低版本的浏览器与新版本浏览器可能写法不同； 2、下拉框的小三角 select 标签会出现小三角,通常这个小三角我都会去掉，或者用背景图片的方式替换为符合要求的样子。...3、input[type=number]右边的spinners nput[type=number] 通常用在移动端设备上，浏览器会识别number输入类型，然后改变数字键盘来适应它。...webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 4、-webkit-tap-highlight-color 在移动端浏览器上...5、滚动条 webkit现在支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式。...有时候需要把滚动条去掉，特别是页面中出现几条滚动条的时候： ::-webkit-scrollbar { width: 0; }
5.3，scroll-view 在 ios 中下拉刷新，触发两次 bindscrolltoupper 事件？ 5.4，scroll-view 组件为什么有时候 scroll-x 不作用？...特别当组件的设计过于随心所欲时，学习者的学习负担也更大了 1、scroll-view 相关问题 ? scroll-view是可滚动视图区域组件。...10，在一些购物类或订餐类小程序中，左侧有物品分类，左侧是物品列表，单击分类，右侧自动滚动到相关位置，右侧列表上下滚动，左侧分类菜单自动切换，获得高亮焦点，这样的功能是怎么实现的？...官方文档说，在使用scroll-into-view时，「设置哪个方向可滚动，则在哪个方向滚动到该元素」。...在一些展示列表中，开始的时候可能只有一二个子项，这个时候也想触发下拉更新，合适的做法是在列表里故意放一个无用的空项。看以无用，实则有用。
而用网站背景做首页，在一些旅游网站比较常见，假设一个旅游景点，把最好的旅游景点作为首页的背景，效果一下就迸发出来了；同时，对于一些城市社区网站，使用城市照片或者社区图片做背景，同样给人如临其境的感觉，一下拉近了和网站之间的关系...随着手机和平板设备越来越多地进入人们的生活，人们访问网站的设备多了起来，如何让用户在不同设备上流畅的进入网站呢？响应式设计也成为了当下网站开发不可忽视的一股力量。...一个可自适应任何设备的网页是很了不起的。响应式设计能确保用户无论是在移动设备还是在PC上都能按你的意愿浏览内容。 ...视差滚动 视差滚动设计可以让主页从一开始就能抓住用户的眼球，视差滚动的网页在现在来说无疑是效果很明显的。因为视差效应使背景图像的移动速度低于前景中的内容，从而产生深度和沉浸感。...当你的网站想要以流畅、线性的方式讲述一个故事时，满屏滚动与视差效应的结合可以创造一个完全沉浸式的浏览体验。 视差滚动就是让多层背景以不同的速度移动，形成运动视差3D效果。
Flutter的ListView组件，虽然很好用，但是数据量大的时候，在低配置的机器上会奇卡无比，所以我封装了一个ListView组件，对数据进行截断，并使用 keframe 插件进行流畅性优化，提升低配置设备的用户体验...flutter_easyloading/flutter_easyloading.dart';//后续去除 import 'package:keframe/size_cache_widget.dart'; /// 可缓存...+下拉刷新+滚动到底部自动加载的ListView组件（返回数据定义复杂是方便局部刷新） class CacheTableList extends StatefulWidget { List tableList...ThemeData.canvasColor notificationPredicate: defaultScrollNotificationPredicate, //是否应处理滚动通知的检查...1","列表内容2","列表内容3","列表内容4","列表内容5","列表内容6"], pageCount: 3,//上面6笔静态数据，会以每三笔的方式加载。
领取专属 10元无门槛券
手把手带您无忧上云
