有时候我们需要使用一些类似toast,messge.loading这些跟js交互很频繁的插件,vue3.x这类插件的定义跟vue2.x插件稍大,而且相对变得复杂了一点点. 第一种.需要时创建,用完移除 这种做法相对损耗性能,当一些显示隐藏频率不是特别高的插件可以如此封装. 1.新建loading.vue文件 <template> <div class="loading"> 加载中... </div> </template> <scr…

前言 在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果,我很喜欢.感觉有回应. 现在开始实现我页面的第一个交互效果,让我的页面更生动一点. 实现的插件 基于iScroll.js插件 代码 html <div class="header">我是头部固定</div> <div id="wrapper&quo…

js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.lazyload官网的API演示怎么找到? 跟着github上面的网址一级一级的摸上去的,github上面显示的资料有限 官网地址:Lazyload Images After Five Second Delayhttps://appelsiini.net/projects/lazyload/timeout…

js插件---Amaze UI dialog如何使用 一.总结 一句话总结:别人给你列出来的参考手册照着用先 1.在哪里去找插件参考资料或者使用手册(一般位置找不到的时候)? github上面啊,非常详细了 2.dialog中如何动态控制弹出框? 方法一:这里可以用将方法赋值给变量的形式,然后再将这个变量show()出来 25 var $actions = AMUI.dialog.actions({ 26 title: '标题啊', 27 items: [ 28 {content: '<a hr…

js插件---layer.js使用体验是怎样 一.总结 一句话总结:只有jquery和js,没有css,使用各种弹出层掉用各种函数特别方便,特别简单,特别好用. 引入只需要引入这两个,css都不需要,真方便(手机端用的话好像有自己的js和css) 6 <script src="layer/jquery.min.js"></script> 7 <script src="layer/layer.js"></script>…

js插件---jqGrid插件如何使用 一.总结 一句话总结:jqdrid还是依赖加js初始化的方式,很多时候插件的问题一般都是引入的css和js的问题,jqgrid里面遇到的问题就是下载包有一些js和css没有,因为是依赖而不属于本身 1.直接看插件官方文档好还是看中介(amazeui,bootstrap等)的文档好? 有些时候直接官方文档可能更加方便 有些时候则是这些中介的文档方便 所以其实可以都看一下,比较一下就知道用哪个了 2.jqGrid的数据是怎么获取的? 用接口获取的jsonp格式…

amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class="am-btn am-btn-primary btn-loading-example">Submit - Button</button> <input type="button" class="am-btn am-btn-primary b…

---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加js样式和插件,找到对应图片,写html代码和jQuery代码. 1,添加jQuery插件:jquery-1.8.3.js和jquery-1.8.3.min.js(插件可以下载). 基本上jQuery效果实现都基于此插件,类似于咱们在三层中的DbHelp类 2,添加查看图片的插件和样式和图片(big…

参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 'template' : '.single_item', //html记录DIV的class属性 'trigger' : '.get_more', //触发加载更多记录的class属性 'scroll' : 'false', //是否支持滚动触发加载 'offset' : '100', //滚动触发加…

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始,这样折现图的幅度会很大,不是正常的幅度,解决办法如下, 示例代码: window.onload = function () { var ctx = document.getElementById("canvas").getContext("2d"); window.m…