mintui是饿了么团队针对vue开发的移动端组件库，方便实现移动端的一些功能，这里只用了Loadmore功能实现移动端的上拉分页刷新，下拉加载数据，废话不说上代码。<template> <div class="main-body" :style="{-webkit-overflow-scrolling: scrollMode}"> <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"> <ul class="list" v-for="(val, key) in ...
此案例主要实现了一个功能是，在vue实例首次运行时，在加载了login和404两个路由规则，登录成功后，根据登录用户角色权限获取该角色相应菜单权限，生成新的路由规则添加进去。 做过后台管理系统都一定做过这个功能，在对菜单权限进行粗粒度权限控制的时候，通过角色获取菜单后，异步生成菜单，所以一开始拿到需求的时候，我也以为这和平常的没什么不同，不过做起来就发现了很多问题， 1.vue-router的实例，在new vue实例的时候，就...
前后端分离，后端提供了接口。但有一部分数据，比较产品说明文件，是存在其他的服务器上的。所以，在页面显示的时候，如果以页面内嵌的形式显示这个说明文件。需要搞点事情以达到想要的效果。 不同以往的IFRAME标签，那种方式比较Low，另外有其他的一些BUG。本文思路是把HTML请求以来，以v-html的形式加载到页面内部。注册全局组件【v-html-panel】 1.HtmlPanel.vue文件 <template><div><mu-circular-progress :size="40" v-if="lo...
我们经常看到数据未出现时，页面中会有一条提示消息， 页面正在加载中，如何实现该效果呢 ，请看下面代码 <template><section class="page" v-if="option" :style="{background: option.background,color: option.color||#fff}" :class="{page-before: option.index < currentPage,page-after: option.index > currentPage,page-current: option.index === currentPage}"><div :class="{all-center: option.isCenter}"><slot></sl...
上拉加载以及下拉刷新都是移动端很常见的功能，在搜索或者一些分类列表页面常常会用到。跟横向滚动一样，我们还是采用better-scroll这个库来实现。由于better已经更新了新的版本，之前是0.几的版本，更新了一下发现，现在已经是1.2.6这个版本了，新版本多了些 比较好用的api，所以我也重写了之前的代码，用新的api来实现上拉加载以及下拉刷新。 首先把基本的样式写好，这里就略过了，然后引入better-scroll库import BScroll from b...
本文介绍了vue 模拟后台数据（加载本地json文件）调试，分享给大家，也给自己留个笔记 首先创建一个本地json文件，放在项目中如下 {"runRedLight":{"CurrentPage": 1,"TotalPages": 0,"TotalItems": 0,"ItemsPerPage": 100,"Items":[{"DEVICEID":"121212","DEVICETYPE":"1","DEVICETIME":"2016-10-10","CREATEDTIME": "2016-10-11"},{"DEVICEID":"124412","DEVICETYPE":"1","DEVICETIME":"2016-10-10","CREATEDTIME": "2016-10-11"...
刚开始学vue的时候没有使用脚手架，现在用脚手架写法有点不同，今天遇到的问题是使用豆瓣api异步加载数据的时候，会一直在命令行上报错，基本上错误都是xxx 未定义。 例子<template> <div v-if="moviesData"><!-- 正在上映的电影-北京 --><h1>{{ moviesData.title }}</h1></div> </template><script> import jsonp from jsonp // 一个jsonp插件 npm install jsonp --saveexport default {data(){return {moviesData: null // 如...
前言 懒加载也就是延迟加载，不知道大家在工作中有没有发现，当你的SPA（单页应用程序）变得复杂时，打包构建后的Javascript包会变得非常大，以至于严重影响页面的加载时间。幸运的是：vue-router支持WebPack内置的异步模块加载系统。所以，那些使用较少的路由组件不必打包进bundles里，只需要在路由被访问时按需加载。话不多说了，来一起看看详细的实现过程：使用假设你的路由配置是这样的： import MainPage from ./routes/MainP...
上一篇讲到在项目中使用上拉加载更多组件，但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题，我们有时候也会换成滑动到底部自动加载的功能。 既然都是加载更多，很多代码思想势必相似，主要区别在于上拉和滑动到底部这个操作上，所以，我们需要注意： 上拉加载是point指针touch触摸事件，现在因为是滑动加载，需要添加scroll事件去监听然后执行相应...
最近在做移动端h5页面，所以分页什么的就不能按照传统pc端的分页器的思维去做了，这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多，符合正常使用习惯。 首先简单写一下模板部分的html代码,，很简单清晰的逻辑： <template><div class="loadmore"><div class="loadmore__body"><slot></slot></div><div class="loadmore__footer"><span v-if="loading"><i class="tc-loading"></i><span>正在加载</span></span><span v...
由于工作的需要并鉴于网上的vue.js滚动加载方案不合适，自己写了一个简单实用的。就短短的150行代码。组件代码 // scrollLoader.vue // 滚动加载组件<style scoped>.container-main {margin: 0 auto; overflow: auto; overflow-x: hidden; padding: 0;}.loading{ width: 100%; height: 40px; position: relative; overflow: hidden; text-align: center; margin: 5px 0 ; color: #999; font-size: 13px;}.loading-icon{color: #707...
使用vue制作加载更多功能，通过ajax获取的数据往data里面push经常不成功，原因是push是往数组中追加数据内容的，而不能用作数组之间的拼接，ajax获取的数据就是数组形式的，因此不成功，应该使用concat()拼接两个数组。 //这是错误的写法 $.ajax({ type:get,async:false,url:path+no/noticeMobile/getSendNoticeList?imToken=+ getToken +&pageFlag=2,dataType: "json",success: function(msg){_self.$set(loadMore, msg);_self.co...
本文为大家分享了jquery加载单文件vue组件的方法，供大家参考，具体内容如下 /**注册组件 */function registerComponent(name){dm[name] = {};Vue.component(name + -component, function(resolve, reject){$.get(./modules/ + name + .vue).then(function(rv){var temp = rv.match(/<template[^>]*>([\s\S]*?)<\/template>/)[1].replace(/(^\s+)|\n/g, ),script = rv.match(/<script[^>]*>([\s\S]*?)<\/script>/)[1].replace(/(^\...
使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js 路由相关信息,该路由文件引入了多个 .vue组件 import Hello from @/components/Hello import Province from @/components/Province import Segment from @/components/Segment import User from @/components/User import Loading from @/comp...
vue是一种轻巧便捷的框架，那么如何进行对于数据加载的刷新呢？以下就是我对于vue.js数据加载的一点想法 源码： <div @scroll="onScroll($event)" style="height: 100%;overflow: auto;"><ul class="shop-brand-index" v-show="sitems.length > 0" ><li v-for="item in sitems"><div @click="linkUrl(item.code)"><img v-bind:src="item.publicImg"></div></li> </ul><div class="loading_wrap myload disn"><p>加载中...</p><i cl...