https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
(adsbygoogle = window.adsbygoogle || []).push({});
$("#tab-a-" + options.menuID).click(); // 选中打开的tab
导航分析(nav): 源码文件: _navs.scss:导航模块 Mixins/_nav-divider.scss:分隔线 Mixins/_nav-vertical-align.scss:垂直对齐 1、只是用css进行了样式修饰,对Js没有任何依赖 2、导航模块可以包含下拉模块 3、实现了水平、垂直、水平平均分配(table-cell实现,4.0移除)、tabs、胶囊等样式 4、Nav-divider:有一个像素的高度实现分隔线 5、Nav-stacked:垂直对齐实现 6、提供了tab-content类,
在根目录下创建custom-tab-bar目录,然后在该目录下新建组件component,注意是组件,不要建成page页面,虽然都一样是js/json/wxml/wxss四个文件
经历了一段繁忙的工作期,还有2天就要过年了。在这里总结一下最新开发微信小程序的心得和体会,算是一个总结,也算温故而知新,如果还能对读者有所帮助,那就更好了。 开发前准备 本文首先假定开发者已经粗略阅读过微信小程序的开发文档,所以注册小程序的流程就不介绍了。不过需要注意,小程序现在只允许企业用户注册,所以认证需要企业营业执照复印件和加盖公章的小程序申请公函。如果是选择对公账户认证,则不需要公函。另外,如果需要使用微信支付接口,则需要另外进行一次微信认证,这个就必须使用300块的方式了,感觉靠给微信认证的公司就
Alfred是一款Mac系统必装软件,他提供快速启动App、全文查找文件、workflow自动化流程等功能。本文介绍如何使用Alfred Workflow+Apple Script实现快速启动开发环境。 问题 & 设想 先梳理下,我在日常启动前端的工作环境时,需要手动操作的步骤: 打开Webstorm并选择开发项目(10秒) 打开iterm命令行工具,并cd到项目下(5秒) 打开whistle代理(5秒) 打开chrome浏览器工作必须的插件,比如代理插件、react、vue调试插件(20秒) 打开c
找了个时间看了下EasyUI插件。对它的插件感觉是非常舒服,特地把Easy UI的大部分功能属性做了一下汇总。
先放个图看看滑动固顶是啥效果: image.png 中间那个 tab 条,平常的时候是固定的,等到页面滑上去的时候,又像 fixed 一样贴在顶部。 position: sticky 就是用来实现这个效果的,元素不脱离文档流,仍然保留高度,所以这个属性真是人畜无害啊,而且效果如丝般润滑,堪比原生。 事实上,很多看起来人畜无害的东西,其背后都有一个大坑。 我们的 html 结构是这样的: <body ontouchstart=""> 06
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第12天,点击查看活动详情 >>
selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了。
自定义组件由 json、wxml、wxss、js 四个文件组成,我们通常是在根目录下创建一个文件夹——components,在该文件夹中存放我们自定义的公共组件。
众所周知,可以滑动的 scroll 组件在移动端非常的重要,几乎每个页面都要用到。
但是,由于 iPhone X 的「异型」屏幕,以及底部的「小白条」的存在,不少开发者都头疼应该如何适配这块略显奇怪的屏幕。
目前已经初步搭出了整体的框架,秉着取之于社会,回馈于社会的原则,我将这个项目开源到GitHub uni-shop,发展壮大uni-app社区。项目肯定有不足和考虑不周之处,欢迎大家指正并提出Issues。
高仿淘宝、京东等商城首页、商品分类页面,正在做商城项目的同学有福啦,看看是你们想要的效果吗?
tab栏可以滑动,切换页面跟随tab栏同步滑动。这里需要注意的是使用swiper组件时,它会有一个默认的高度,你必须动态的获取数据列表的高度覆盖原来的默认高度。
Hi 头像最近进行了 v2 版大改版,其中的交互动画得到了不少好友的称赞。今天我就来分享一些关于小程序 TabBar 创意动画,将从 TabBar 类型、完整的 TabBar 创意动画进行分析。
功能类似上图 实现代码: https://github.com/klren0312/cookies-chrome-plugin/edit/master/README.md
1.小程序向后台请求接口必须使用https,包括web-view里的网页,如果项目中有用到web socket,那么也必须使用wss协议。https证书一般会用第三方的。比如阿里云的。 2.在微信小程序管理后台,还需要配置合法域名。当然,在后台还没有部署https之前,我们也可以进行开发调试,只需要设置不校验合法域名,https证书等即可。步骤 : 工具--项目详情--不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书
小程序标签页切换效果 效果: image.png 效果 .wxml <view class='topTabSwiper'> <view class='tab {{currentData == 0
在开发页面时,往往需要实现,点击页面的导航菜单页面滚动到相应位置,滚动页面实现菜单选项的高亮。在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果。在框架中vant UI框架也为我们实现了这一效果。
如上图,在iframe子页面的<script>元素中,定义了taskStatus全局变量,如果希望在其父页面中获取该全局变量的值,则可在父页面的<script>元素中新增js脚本如下:
最近做一个web页面,希望在手机上能滑动切换页面,第一次这种要求,在网上找到了一个插件swiper,swiper2可以在电脑和手机上使用,于是选择这个插件,在使用这个插件的过程也遇到了很多问题,如滚动条很长,体验不好,最后采用js来控制高度,在此页面中也采用了bootstrap-table插件来固定表头,采用js动态的设置高度,当页面高度小时,有滚动条,页面高时就完全展示,为了体验好,当滚动到第一个页面底部时,滑动切换第二个页面的顶部,需要scrollTop实现
移动端中需要使用swiper插件实现tab切换和手势滑动的,在各种APP上我们可以很常见,但在小程序上实现这个看起来有点难,因为swiper插件滑动到下一屏的时候位置总是会回到跟上一屏相同的位置。我记得微信刚出来不久,有一个这样子的需求,那时候是另外一个同事在跟,跟我说到过这个功能无法实现。最近我也接到这个需求,于是我认真的看了一下微信组件文档,发现swiper+scroll-view组件结合是可以实现这个功能。
目录介绍 01.遇到问题汇总 02.关于布局设置 03.基础语法总结 04.关于交互问题 06.关于回传数据 07.关于网络请求 08.关于页面刷新 09.关于注意问题 10.待解决和思考 01.遇到问题汇总 在我的页面,给item设置分割线时,定义view的class为line出现问题,但是把名称修改成cell-line就可以。猜想可能是设置class名称时,用line有冲突。 从A页面跳转B页面,关闭B返回到A,如何回传数据?看了往上方案,发现都有问题,最后用存取值替代。 比如切换页面布局视图刷新时,我
产品说小程序返回到首页不太方便,想添加返回首页按钮,UI说导航栏能不能设置背景图片,因为那样设计挺好看的。
在使用react搭配react-router做应用的时候,你可能遇到这样的问题,当我从第一个页面过渡到第二个页面,然后返回之后,发现之前的页面的状态全部不见了,即回到了初始的状态。 这点在页面存在多个TAB页或者多条件筛选的时候体验会更加明显,这时候我又不得不点击我之前选择的页签,重新选择筛选条件,然后再进行搜索。因此,在这种情况下,保存之前的状态显得尤为亟待解决,下面是自己实践出来的几种方法,做一下分享,同时希望和各位一起探讨,看能不能有什么更好的办法。 代码:github 解决方案一:子路由方式 //
每个子目录中保存着一个页面的相关文件 —— 通常是4种不同扩展名的文件, 分别是页面中的逻辑文件、页面结构文件、样式表文件、配置文件; 为了减少开发时的配置项,框架特别约定描述页面的这4个文件必须具备相同的路径和文件名;
我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug,后来我查看代码才发现直接用的是 offsetTop 这个属性,而且并没有做兼容性处理。
解释一下,首先有一行 .tab 是 tab按钮, .inner 是对应的三个 li 默认隐藏,第几个 tab 选中就对应的显示第几个 li 。
吸顶元素的初始位置一般靠近页面顶部,但与顶部有一定距离,这块区域放的是最醒目的元素,比如Banner图。页面向下滚动超过吸顶元素初始位置时,把吸顶元素固定在顶部
CodeMirror(下面简称为cm)是一款基于JavaScript、面向语言的前端代码编辑器。它支持开箱即用,自带了超过100种语言的库,同时还有很多附加功能,目前得到了jetbrains等公司的支持。在这个分类下,能够与cm并驾齐驱的另一个编辑器则是ACE。由于笔者并没有使用过ACE,因此就不对两者做对比了。接下来笔者会分几个章节来具体介绍介绍cm的基本使用方法和高级功能。
相信平时大家都会去刷B站,遇到有趣的但是暂时还没有时间看的就会放到稍后再看里面,久而久之稍后再看变的越来越多。今天就和我一起做一个插件,来实现这样的一个功能
二、另一种方式是原生方式,首先新建移动app,选择底部选项卡模板,会生成原生控件的底部选项卡模板
pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、**底部的原生tabbar **等。
Chrome扩展是一种可以在浏览器中添加新功能和修改浏览器行为的软件程序,我们可以基于Manifest规范的API实现对于浏览器和Web页面在一定程度上的修改,例如广告拦截、代理控制等。Chrome DevTools Protocol则是Chrome浏览器提供的一套与浏览器进行交互的API,我们可以基于DevTools协议控制Chromium内核的浏览器进行各种操作,例如操作页面元素、模拟用户交互等。
持久化对象 Kibana中可以查询到很多保存的对象,他们都存储在es中一个叫做.kibana的索引中。 搜索 存储在type为search中; 图表 存储在type为visualization中; 仪表板 存储在type为dashboard中; 每个plugins下的tab页都有一个对应的savedObject对象,比如 检索页对应的是savedSearch对象(discover/saved_searches/_saved_search.js) 图表页对应的是savedVisualization对象(vis
小程序最近是越来越火了…… 做小程序有一段时间了,总结一下项目中遇到的问题及解决办法吧。
在nwjs里,宿主页面与做过特殊标记的iframe页面(nwdisable nwfaketop和nwUserAgent)通信,并没有什么特别的地方
在微信小程序中有四种文件类型,主要分样式,骨架,业务,配置,样式为wxss,这里的wxss与页面的css相类似,骨架为wxml,这里的wxml于页面的html相类似,业务逻辑都是以js为结尾,配置文件为json结尾。
在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三个特效,希望这三个特殊能让大家受到启发,利用css3做出更好,更炫的动画效果,并且对比这三个特效和JS特效的对比,希望能帮助到是大家学到CSS3的一些知识。今天这三个案例可以说是一个预习或者热身吧,以后也会写关于CSS3更好的作品或者文章,最近我也是在编写一个css3的动画库!
代码不多,核心代码 200 行,感兴趣的可以戳这里:Github - broadcastAnimation[1]
微信小程序作为一个轻量级的应用平台,为用户提供了便捷的信息获取和服务体验。本文将以一个新闻阅读类的微信小程序为例,详细介绍如何实现新闻列表展示、图片加载、Tab滑动切换、获取数据、处理图片加载失败、数据缓存、分页加载、错误处理、下拉刷新、列表项点击跳转、用户授权、搜索功能、图片预览和小程序分享等功能。跟随本文的步骤,你将轻松掌握微信小程序的开发技巧,为用户打造一款实用且美观的新闻阅读应用。
我不甘心啊,马上升级了 Chrome 到最新的版本依然不行,仔细看了外媒以后发现,仅 Chrome Canary 版本支持这个功能,Chrome Canary 版是啥?开发者专用的每日构建版,所以还没有正式发布。
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
这款主题的设置:Settings —> Appearance & Behavior —> Material Theme
作为数据驱动的领导者react/vue等MVVM框架的出现,帮我们减少了工作中大量的冗余代码, 一切皆组件的思想深得人心。组件就是对一些具有相同业务场景和交互模式代码的抽象,这就需要我们对组件进行规范的封装,掌握高质量组件设计的思路和方法可以帮助我们提高日常的开发效率。笔者将会通过实战抖音订单组件详细的介绍组件的设计思路和方法,对新手特别友好,希望对前端新手们和有一定工作经验的朋友有一定帮助~
领取专属 10元无门槛券
手把手带您无忧上云