分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能。具体如下： 文件page.vue为一个pc端的分页组件,基础的分页功能都有，基本的思路是，页面是用数据来展示的，那就直接操作相关数据来改变视图 Getting started import Page from ./page.vue 从目录引入该文件,在父组件注册使用代码如下: <page :total=total :current-index="currentIndex" :listLen=listLe...
本文介绍了Vue树形组件的示例代码，分享给大家，具体如下： 使用SemanticUI和vue做一个menubar组件，实现方法大概是这样的：<template> <div class="ui menu"> <template v-for="item in leftItems"> <a " v-if="!item.children" @click="item.click"> <i class="{{ item.icon }} icon" v-if="item.icon"></i>{{item.text}} <div class="ui mini {{item.labelColor }} label" v-if="item.label"> {{item.label}} </div> </a> //如...
前言 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 本文主要介绍了关于jQuery+localStorage实现简易计时器的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 原型需求 1.关闭浏览器时时间继...
PC端上实现图片轮播效果很简单，只要通过使用click事件就可以非常简单的实现效果，但是在移动端上，就要通过核心的touch事件来实现。 下面是移动端手指滑动轮播图的完整代码。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style> *{margin:0;padding:0;} li{list-style:none;} .lb...
首先是页面上：<div class="row cl"><label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>是否存在促销活动：</label> <div class="formControls col-xs-8 col-sm-9 skin-minimal"> <div class="check-box"> <input type="checkbox" value="1" id="isHaveActive" > <label for="isHaveActive"> </label> </div> </div> </div><div id="active" name="active" style="display:none;"><div...
本文介绍了vue组件中使用iframe元素的示例代码，分享给大家，具体如下：需要在本页面中展示vue组件中的超链接，地址栏不改变的方法:<template><div class="accept-container"><div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul><li v-for="item in webAddress"><a :href="item.link" rel="external nofollow" target="showHere" @click="showIframe">{{item.name}}</a></li> </ul> <iframe v-show="ifr...
本文主要介绍微信小程序的模拟图片懒加载，实现的原理是通过页面预加载图片（默认图），加载完成后再显示出来原图，而非真正意义上的懒加载（跟web的懒加载还有很大的差距），只是借此提高用户体验度。多图片懒加载 1.xml页面 <block wx:for="{{list}}" wx:key=""><image class=relative width-100 mgb-20 fade_in src={{item.cover_url}} mode=widthFix style=display:none bindload="_imgOnLoad" id={{item.cover_url}}></image>...
这段时间告诉项目需要，用到了vue。刚开始搭框架的时候用的是vue-resource后面看到官方推荐axios就换过来了 顺便封装了一下 //引入axios import axios from axioslet cancel ,promiseArr = {} const CancelToken = axios.CancelToken; //请求拦截器 axios.interceptors.request.use(config => {//发起请求时，取消掉当前正在进行的相同请求if (promiseArr[config.url]) {promiseArr[config.url](操作取消)promiseArr[config.url] =...
今天看到一个kata，提出一个“emirps”的概念：一个质数倒转后得到的是一个不同的质数，这个数叫做“emirps”。 例如：13,17是质数，31,71也是质数，13和17是“emirps”。 但是质数757,787,797是回文质数，这意味着反转的数字与原始数字相同，所以它们不被认为是“emirps”。 题目要求写一个函数输入一个正整数n，返回小于n的“emirps”的个数，其中最大“emirps”、以及所有小于n的“emirps”的和。 解题思路为先枚举出所有小于n的...
React Native 截屏组件：react-native-view-shot，可以截取当前屏幕或者按照当前页面的组件来选择截取，如当前页面有一个图片组件，一个View组件，可以选择截取图片组件或者View组件。支持iOS和安卓。 安装方法 npm install react-native-view-shot react-native link react-native-view-shot使用示例 captureScreen() 截屏方法 截取当前屏幕，跟系统自带的截图一致，只会截取当前屏幕显示的页面内容。如果是ScrollView，那么未显示...
我们在项目中经常会用到HTTP请求来访问网络，HTTP(HTTPS)请求通常分为"GET"、"PUT"、"POST"、"DELETE"，如果不指定默认为GET请求。 在项目中我们常用到的一般为GET和POST两种请求方式，针对带参数的表单提交这类的请求，我们通常会使用POST的请求方式。 为了发出HTTP请求，我们需要使用到 React Native 提供的 Fetch API 来进行实现。要从任意地址获取内容的话，只需简单地将网址作为参数传递给fetch方法即可（fetch这个词本身也就...
朋友的项目里要实现一个消息无缝滚动的效果，中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题，我研究了一天终于解决了这个1S的小问题 项目环境vue-cli ，请自行配置好相应的，环境及路由，这里主要介绍实现的方法第一步在模板中 使用v-for方法循环出消息列表<template><div id="box"><ul id="con1" ref="con1" :class="{anim:animate==true}"><li v-for=item in items>{{item.name}}</li></ul> </div>...
iView 是一套基于Vue.js的开源UI组件库，主要服务于PC界面的中后台产品。 1、iView的特性1) 高质量、功能丰富 2) 友好的API ，自由灵活地使用空间 3) 细致、漂亮的 UI 4) 事无巨细的文档 5) 可自定义主题2、iView的安装：1) 使用npm：npm install --save iview 2) CDN引入：<link rel="stylesheet" href="css/iview.css" rel="external nofollow" > <script src="js/iview.min.js"></script> 由于公司项目需要，所以目前捣鼓了vu...
前言 这段时间赶项目，需要用到多文件上传，用Vue进行前端项目开发。在网上找了不少插件，都不是十分满意，有的使用起来繁琐，有的不能适应本项目。就打算自己折腾一下，写一个Vue的上传插件，一劳永逸，以后可以直接使用。 目前vue-easy-uploader已上传到GitHub和NPM，使用起来方便简单，不需要繁琐的配置即可投入生产，不过需要后端配合，实现上传接口。 本项目GitHub地址: https://github.com/quanzaiyu/vue-easy-uploader 本项...
思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件 1. 准备工作 安装 3 个依赖: axios, jszip, file-saver yarn add axios yarn add jszip yarn add file-saver2. 下载文件 import axios from axios const getFile = url => {return new Promise((resolve, reject) => {axios({method:get,url,responseType: arraybuffer}).then(data => {resolve(data.data)}).catch(error => {reject(error.toString...