在【实现丰盛】的插件基础修改【vue2.0 移动端，下拉刷新，上拉加载更多 插件】，1.修改加载到尾页面，返回顶部刷新数据，无法继续加重下一页2.修改加载完成文字提示原文链接：http://www.cnblogs.com/sichaoyun/p/6647458.html <template lang="html"><div class="yo-scroll":class="{‘down‘:(state===0),‘up‘:(state==1),refresh:(state===2),touch:touching}"@touchstart="touchStart($event)"@touchmove="touchMove($even...
1：使用的是vue-cli+webpack，通过npm来安装的npm i lib-flexible --save2：在main.js中引入lib-flexibleimport ‘lib-flexible/flexible‘3：通过meta标签，设置设备宽度以及缩放比例<meta name="viewport" content="width=device-width, initial-scale=1.0"> 4.安装px2rem-loadernpm install px2rem-loader 5.配置px2rem-loader 在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：const cssLoader = {loader: ...
Vue搭配上 Element 还是挺香的，对于手机端显示集合数据的时候，受到界面大小的限制，自然是不能用分页来展示，一般主流选择是点击加载，或者向上滑动屏幕加载，说白了，这种机制与 下一页的功能类似，区别在于将下一页的数据追加到当前数据中，仅此而已，话不多说，这里先构造下前端的界面。如下所示，仅仅遍历数据后面加了一个 滚动的div，然后通过 v-if 来判断是否显示哪一个. <div id="app"><div style="background-color:#4ca...
1.下载安装npm install vee-preview --save2.main.js 添加 //图片浏览插件import VuePreview from ‘vue-preview‘3.组件template中使用<vue-preview :slides="slide1"></vue-preview> 4.定义data里面的数据数组,包括图片地址,大小等data () { return { slide1: [ { src: ‘https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg‘, msrc: ‘https...
dom-to-image是一个可以将任意DOM节点转换为用JavaScript编写的矢量（SVG）或光栅（PNG或JPEG）图像的库。 它基于Paul Bakaus的domvas并且已被完全重写，修复了一些错误并添加了一些新功能（如Web字体和图像支持）。github：点击查看线上demo：点击查看npm安装和引用npm install dom-to-imageimport domtoimage from ‘dom-to-image‘;domtoimage方法和属性domtoimage主要的方法有：domtoimage.toPng(...);将节点转化为png格式的图...
开发微信公众号网页，页面登录成功之后，是禁止再次返回到登录页。我在页面设置了让禁止跳到登录页，可是在手机上有自带的微信浏览器后退按钮，所以必须要禁止浏览器后退，才能禁止后退到登录页。刚开始百度，查到了一个vue禁止浏览器后退的插件：vue-prevent-browser-back首先，npm i vue-prevent-browser-back -save然后在需要禁止浏览器后退的页面里引入： 1 Vue.component(Navbar.name, Navbar);2 Vue.component(TabItem.na...
在.vue的文件中使用了better-scroll，在div标签上绑定click事件后，无效。原因：使用了better-scroll，默认它会阻止touch事件。所以在配置中需要加上click: true 即可解决mounted(){this.$nextTick(() => {let bscrollDom = this.$refs.bscroll;this.aBScroll = new BScroll(bscrollDom,{ mouseWheel: true, click: true, tap: true })})} 原文：https://www.cnblogs.com/javascripter/p/10411922.html
关于vue移动端的适配们需要用到这个插件 postcss-pxtorem：转换px为rem的插件安装 postcss-pxtoremnpm install postcss-pxtorem --save新建 rem.js文件const baseSize = 32// 设置 rem 函数
function setRem () {// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。const scale = document.documentElement.clientWidth / 750// 设置页面根节点字体大小document.documentElement.style.fontSize = (baseSize * Math....
fastclick：处理移动端click事件300毫秒延迟。npm install fastclick -Smain.js 中引入，并绑定到bodyimport FastClick from ‘fastclick‘
FastClick.attach(document.body);原文：https://www.cnblogs.com/cnloop/p/9998821.html
app.vue<template>
<div id="app">
<transition :name="transitionName">
<keep-alive >
<router-view v-if="$route.meta.keepAlive" class="Router"></router-view>
</keep-alive>
</transition >
<transition :name="transitionName">
<router-view v-if="!$route.meta.keepAlive" class="Router"></router-view>
</transition >
<Play></Play>
</div>
</template>
<script>import Play from ‘./components/play‘
export defau...
在vue.js使用v-for遍历出的li中的@click事件在移动端无效，在网页端可以执行，代码如下<template><div class="rating-section" ref="ratingSection"><div><div class="comprehensive"><div class="score"><div class="mark">{{seller.score}}</div><div class="text">综合评分</div><div class="compare">高于周边商家{{seller.rankRate}}%</div></div><div class="service"><div class="service-item"><span class="lable-text">服...
1.创建项目（vue项目的流程就不多讲了）2.cnpm install vux --save3.在build/webpack.base.conf.js配置：const vuxLoader = require(‘vux-loader‘)把第一个module.exports赋值变量let webpackConfig ={里面代码不动}然后这个放在最底部去module.exports = vuxLoader.merge(webpackConfig, {plugins: [‘vux-ui‘, ‘progress-bar‘, ‘duplicate-style‘]
})4.安装vux-loader使用命令cnpm install vux-loader -D5.cnpm install l...
原文地址前言这段时间赶项目，需要用到多文件上传，用Vue进行前端项目开发。在网上找了不少插件，都不是十分满意，有的使用起来繁琐，有的不能适应本项目。就打算自己折腾一下，写一个Vue的上传插件，一劳永逸，以后可以直接使用。目前vue-easy-uploader已上传到GitHub和NPM，使用起来方便简单，不需要繁琐的配置即可投入生产，不过需要后端配合，实现上传接口。本项目GitHub地址: https://github.com/quanzaiyu/vue-easy-uploader...
一、安装postcss-px2rem-excludenpm install postcss-px2rem-exclude --save
二、配置 postcss-px2rem-exclude 1.在项目的根目录下找到文件.postcssrc.js，在里面添加如下代码module.exports = {"plugins": {// to edit target browsers: use "browserslist" field in package.json"postcss-import": {},"autoprefixer": {},"postcss-px2rem-exclude": { // 添加的代码remUnit: 75,exclude: /node_modules|folder_name/i // 忽...
最近项目需求，需要一个上传多张图片的功能，但是出现的问题是在安卓端是没有问题的，但是在ios上一直都是 invalid signature，但是刷新页面就没有问题了。Vue主打，router使用history模式，外加微信JSSDK套餐 排查了各种情况总是找不出原因，而且神奇的是在安卓上可以正常获取位置，就只是在ios上一直“invalid signature”，打印出来的当前url跟签名的url也明明是一致的，为什么还是签名有问题呢！！？？？页面的结构如下：SPA：...
