vux

一 安装 使用npm 安装 npm install vue-scroller -d 二 引入 import VueScroller from "vue-scroller" Vue.use(VueScroller); 三 使用 < tab> < tab-item @ on-item-click= "e=>tabChange(0)" v-bind:selected= "selectTabIndex=='0'?true:false">未验收 </ tab-item> < tab-item @ on-item-click= "e=>tabChange(1)" v-bind:selected= "selectTabIndex=='1'?true:false">已验收 </ tab-item> </ tab> < scroller :on-refresh= "refresh" :on-infinite= "infinite" ref= "my_scroller" > < scroller> 或者下图(中间的是模板) 在methods方法中增加refresh和infinite2个方法。 methods: { /* * * 下拉刷新 */ refresh() { console.log( "refresh" ); this .pageNumber = 1 ; this .getOrderList(

解决大文件问题，目前发现整个项目打包的出来的文件过大 1.如图一、图二可以看到在Stat Parsed Gzip下文件的大小相差很大，目前从图三中可以看到两个属性productionSourceMap、ProductionGzip，productionSourceMap为true的时候会生成一些map文件(只是方便看源码)，这样会导致额外的文件，代码的内容也被暴露，所以应该设置为false，减少额外文件产生，另外打包的应该开启Gzip压缩，目前看到ProductionGzip为false，可以设置为true，服务器也需要gzip模式 2.如图一、图二可以看到一些大文件，例如echarts、jquery、vux等一些大文件，例如echarts我们可以在线定制自己需要的模块，通过这样减少文件体积，另外一些文件如果可以从cdn引入的，也可以这么去做，如果可以按需加载的，建议都按需加载，例如vux 图一： 图二： 图三： 图四： 图片懒加载 1.滚动到特定位置才进行图片的加载，这样可以减少页面初始化的时候，一次性加载完所有的资源，导致页面响应过慢，先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src），然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中

在一个页面的子组件中引用vux的popup组件时，出现mask遮罩在最上层的问题，百度了一下发现有两种解决办法，现提供第三种。 popup在子组件引用时，vux将vux-popup-mask默认添加到body末尾，如果引用popup的子组件的根节点未添加z-index属性，子元素无论层级多高都会被遮罩，mask会在最上层。 所以解决办法就是给子组件的根节点添加大于500的z-index。 百度的两种解决办法： 1，修改源码： 将popup.js中的 document.body.appendChild(this.divMask) 改为 document.querySelector('.vux-popup-dialog').after(this.divMask) 经过试验后该方法生效，但是关闭popup时，遮罩仍在最上层，导致页面无法点击 2， 找到该Popup组件的祖先DOM节点是否被设置该CSS属性：-webkit-overflow-scrolling: touch; 若被设置将该CSS属性，则去掉即可。 该方法未试验，祖先dom未被添加该属性 原文出处：https://www.cnblogs.com/zzzzyy/p/11736371.html 来源： oschina 链接： https://my.oschina.net/u/4400196/blog/3249227

前言 Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城，用 Vant 就再合适不过了。 vant地址： https://youzan.github.io/vant/#/zh-CN/intro 本章目标 在vue-cli的项目中使用vant的相关组件 项目构建 如果您还没有搭建vue-cli项目，那么请参考 https://www.cnblogs.com/jjgw/p/11334797.html 这篇博客,搭建好的vue-cli项目结构如下： 1.接下来我们在控制台输入安装vant的命令 　　 npm i vant -S ：这是简写形式。 　　npm install vant --save :这是完整写法。 2.安装完成之后的结果 3.如果您不确定是否安装成功，那么我们可以去node_modules中查看 4.接下来我们还需要安装一个插件，方便我们之后优雅的使用vant,在控制台输入 npm i babel - plugin - import - D 或者 npm install babel - plugin - import -- save - dev 5.接下来我们去

最近一直在做移动端微信公众号项目的开发，也是我首次用vue来开发移动端项目，前期积累的移动端开发经验较少。经过这个项目的锻炼，加深了对vue相关知识点的理解和运用，同时，在项目中所涉及到的微信api(微信分享，微信支付)，百度地图api(如何实例化地图，给地图添加自定义覆盖物，给地图添加自定义标注，对地图进行缩放，拖拽等)的相关使用，开阔了自己的知识眼界；现将我开发过程中积累的相关经验与大家进行分享，希望和大家一起学习和进步.... vux：Vue 移动端 UI 组件库的使用； vue-lazyload ：一个简单易用的 Vue 图片延迟加载插件； vuex：vue状态管理工具详细入门； async/await：异步神器来封装接口请求文件fetch.js vue 项目中的迭代判断技巧； vue 项目中常用的图片引入方式； 微信api在vue项目中的使用： vue2实现微信分享坑点和经验 ； vue2实现微信支付坑点和经验； 百度地图api在vue项目中的使用: vue2.0项目中如何使用百度地图api vue2如何给地图添加房源覆盖物； 如何给地图添加自定义定位控件并更换控件的图标； 如何给地图添加自定义当前位置定位标注 几个常用的api(地图缩放，拖拽，获取当前位置)等功能的实现； VUX - Vue 移动端 UI 组件库的使用； vux介绍：详细请参见 官方文档 。

【推荐阅读】微服务还能火多久？>>> 优秀的Vue UI组件库推荐 一、总结 一句话总结： ^、可以注意下Quasar，Quasar功能比较全，下次用的话试下这个，Bootstrap-Vue也同样可以注意下 ^、vue ui库省了我们把组件封装成vue组件的过程（当然也省了我找组件和调组件的过程），所以蛮可以节约开发效率 二、16款优秀的Vue UI组件库推荐 转自或参考：16款优秀的Vue UI组件库推荐 https://www.cnblogs.com/zdz8207/p/vue-ui-framework.html 16款优秀的Vue UI组件库推荐 Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。 在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。 开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。 在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。 PS：国内的UI组件大部分都只有一部分的，常用的头部导航，底部导航，listview，grid表格很多都是没有的。 后面才发现，基于Vue的Quasar

在微信项目中有应用过几个上拉加载更多的组件，但总会出现一些兼容性方面的bug，需要各种补漏( 注:组件都是基于iscroll实现的， iscroll原本就有些坑 )。 Vux 也有提供 Scroller组件 实现上拉加载或下拉刷新，但官方已经不再维护该组件(未实际使用过，不知是否有坑)。所以这次我们采用更为简单的方式来实现加载更多数据效果，废话不多说，直接看效果图。 实际效果图 实现思路 组件模板 <template> <div> <div v-for="(item,idx) in tableData" :key="idx" class="box"> <slot :item="item"></slot> </div> <load-more v-if="loading" tip="正在加载"></load-more> <load-more v-else :show-loading="false" @click.prevent.native="load" :tip="tipText" background-color="#fbf9fe"></load-more> </div> </template> 结合后端分页查询接口 export default { data () { const _this = this return { tableData: [], // 列表数据

最近开发了项目使用了vue-cli3.0+vux搭建的项目，现在总结遇到的问题； 环境：github vux有关于vue-cli3.0以及vux已经搭建好的脚手架vux-cli3 链接 一：如下报错 解决方法： 1：按照官方文档,寻找问题 2：安装github有关于vue-cli3.0已经搭好的环境 链接 ，但是也需要注意引入方式，否则还是会报错的 　　①：全局引入，在main.js中引入组件全局注册，在组件中直接使用就可以啦 　 ②：组件中按需引入，需要创建单独的js文件引入，然后在.vue的script标签用引入js文件。比如我创建的Tabbar.js文件引入注册了vux的tabbar组件，在Tabbar.vue的script中引入Tabbar.js文件就好了 二：打包生成的js中还包含es6语法，导致低版本的手机(ios9)打不开页面，最开始自己觉得很奇怪，毕竟vue-cli3.0本来可以自动的有转换的，但是npm run build之后一直还包含 解决办法： ①：稀土掘金上的一篇文章，一般是可以解决的 https://juejin.im/post/5cb1dc4c5188251b1f4d95ed ②：官方文档 https://juejin.im/post/5cb1dc4c5188251b1f4d95ed 浏览器兼容性，这只是第一步 　　 　　其实npm run

近几年，前端技术能力的值钱程度很突出，名列前茅。这正代表了前端技术的当前行情。前端工程师一般分为初级工程师、中级工程师、高级工程师、架构师或技术经理角色。不同级别的web前端工程师都应该掌握哪些知识呢 初级前端工程师： 能熟练使用html、css、js 主要工作还是搭建静态页面，主要工作可能是给一些工作做企业官网居多（个人猜测）。进阶的知识的话就是响应式这一块了，一套代码能适配pc+手机是初级前端工程师的进阶。 专门建立的学习Q-q-u-n ⑦③①-⑦⑦①-②①① 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划） 中级前端工程师： 作为一名中级前端工程师的话，除了上面的以外，还需要会使用一些框架之类的东西，像bootstrap、jquery之类的。进阶的知识应该是ajax这一块了，当然ajax并不难，了解怎么与后台交互是学习ajax的关键点。 主抓基础，避免盲目，花了太多时间学习那些不是特别需要的东西上。前端领域知识点很多，值得学的东西也很多，聪明的人懂得花时间学习成体系的知识并且研究得足够深入，而不是盲目的看到别人用什么框架就去学什么。只停留在实践运用的阶段，到头来框架们都一个一个被淘汰，你仍在原地踏步。 高级前端工程师： 想成为高级前端工程师？首先要学习的就是前端工程化

随着信息技术不断发展，前端技术的发展也经历了不同的阶段。前端概念随着移动智能手机的普及被正式提出，混合APP开始被广泛开发。近年来，由于前端技术开始实现工程化，一些企业前端开发任务逐渐向后端拓展，逻辑思维能力也逐渐成为前端开发人员必备的能力。从2018年开始，用户体验感要求不断提高，小程序作为一种不用下载就可以使用的应用颇受用户和开发者欢迎。 前端工作还不仅仅只是网页的制作，还有微网站、APP的制作，游戏制作，例如可以将你开发的Web页面直接打包成手机使用的APP应用，游戏的互动界面更是以前端开发技术为主。大规模的公司把这些分得很细, 前端到底是个啥：前端其实是个很大的范畴。简单点说，针对浏览器的开发，浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染。前端代码主要由三个部分构成：HTML（超文本标记语言）、CSS（级联样式表）、JavaScript 。web前端开发工程师的三种级别，一般分为初级工程师、中级工程师、高级工程师。 初级前端工程师：能熟练使用html、css、js 主要工作还是搭建静态页面。进阶的知识的话就是响应式这一块了，一套代码能适配pc+手机是初级前端工程师的进阶， 中级前端工程师：作为一名中级前端工程师的话，除了上面的以外，还需要会使用一些框架之类的东西，像bootstrap、jquery之类的。进阶的知识应该是ajax这一块了