以前最早实现了一个类似的时间选择插件，但是适用范围太窄，索性最近要把这个实现方式发布出来，就重写了一个高复用的vue组件。 支持安卓4.0以上，safari 7以上效果预览 gitHub 滚轮部分主要dom结构 <template data-filtered="filtered"><div class="pd-select-item"><div class="pd-select-line"></div><ul class="pd-select-list"><li class="pd-select-list-item">1</li></ul><ul class="pd-select-wheel"><li class="pd-select...
朋友的项目里要实现一个消息无缝滚动的效果，中途遇到了一点小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>...
本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下 直接引入vue的js文件进行页面渲染分页，不是vuex的哦，以下源码可以直接运行哟^_^<!DOCTYPE html> <html><head><meta charset="utf-8"><title>使用vue2.0与bootstrap3进行简单列表分页</title><link href="http://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet"><script type="text/javascript" src="https://cn.vuejs.org/js/vue....
轻松实现vue2.0轮播效果，供大家参考，具体内容如下 1、安装swiper npm install swiper@3.4.1 --save-dev 2、引用组件 import Swiper from swiper; import swiper/dist/css/swiper.min.css; 3、html页面代码<div class="swiper-container" id="swiper"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item,$index) in detail.imgs"><a v-on:click="showPreview($index,detail.imgs,swiperObj)"><figure class="wp...
前几天刚开始使用vue 做项目，然后自己就在项目中摸索写了一个tab切换的小dome，仿淘宝订单状态的tab切换。HTML 代码： <div class="navigation">//这里是通过循环遍历出来的数据，你需要根据index的值来判断你现在点击的是第几个tab栏导航，同时在js中写一个navChange的方法来把index 传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值<span v-for="(item, index) in navItems" v-touch:tap=" { event: navChange, ...
本文实例为大家分享了vue实现分页效果展示的具体代码，供大家参考，具体内容如下 <!doctype html> <html><head><meta charset="UTF-8"><title>分页练习</title><script src="js/vue.js"></script></head><style>.isList{list-style:none;}.isPadding{margin:5px;padding:5px;border:2px solid gray;}.isRed{color:red;}</style><body><div id="container"><p>{{msg}}</p><ul v-bind:class="{isList:listStyle}"><li v-for="(tmp,in...
前段时间做了一个移动端spa项目，技术基于 :vue + vue-router + vuex + mint-ui 因为使用了vue-cli脚手架的webpack模版，所有页面都以.vue为后缀的文件作为一个组件 最近公司项目比较少终于有空来记录一下自己对vue-router的一些小小的使用心得，一般的移动端口单页应用在跳转页面时候会有相应的转场动画，比如：1. 从当前一级页面跳转二级页面需要展示的转场动画是一级页面向屏幕左边移动消失的同时，二级页面从屏幕的右边向左边移...
一丶首先配置路由并且修改路由配置 路由配置就不讲了重点，给VueRoute添加一个goBack方法，用于记录路由的前进后退状态 this.isBack = true VueRouter.prototype.goBack = function () { this.isBack = truewindow.history.go(-1) }二丶监听路由变化（在路由变化时判断此时的路由状态是前进还是后退）<template><div>动态绑定路由动画，根据路由状态的不同绑定不同的路由动画分别为 ：‘slide-left 和 slide-right<transition :nam...
学习了vue.js也有一段时间了，做了个小demo来熟悉一下，很常见的demo，-------轮播图，没学vue之前的轮播图用JavaScript或者jquery都非常简单，发现用vue来写也挺有意思的。说下简单的思路，图片的轮播用v-if或者v-show来代替原来的Js滑动，过度效果用transition可简单实现，注意，滑动过程中是能看见两张图的，所以要用两个transition。（1）先写出整体的框架<template> <div class="slide-show"> <div class="slide-img"> <trans...
我们经常看到数据未出现时，页面中会有一条提示消息， 页面正在加载中，如何实现该效果呢 ，请看下面代码 <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...
使用Vue.js 2.0 模仿百度搜索框效果，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum-scale=1.0"><title>Vue模拟百度搜索</title><style type="text/css">body, html{padding: 0;margin: 0;}#box{margin-top: 80px;display: flex;flex-direction: column;align-items: cente...
在 vue 中，实现 Tab 切换主要有三种方式：使用动态组件，使用 vue-router 路由，使用第三方插件。 因为这次完成的功能只是简单切换组件，再则觉得使用路由切换需要改变地址略微麻烦，所以使用的是动态组件实现，如果是在大型应用上，可能使用 vue-router 会方便一些。 先看下最终实现的效果，结构比较简单，顶部的三个 Tab 标签用于切换，内容区域分别为三个子组件。效果预览关键代码及分析如下： <template> // 每一个 tab 绑定了...
想必大家应该很多都已经习惯了jquery的DOM操作，jquery的瀑布流实现起来也很容易。 但是，随着时代的发展，随着时代的进步..... 算了算了，扯远了，既然能找到这儿来，肯定是在vue.js上已经有一定的基础了，咱们废话不多说，直接进入主题。 vue-waterfall-easy easy! easy! easy! 重要的事情说三遍！！！ 所以说，咱们今天用到的不是大家熟知的vue-waterfall，而是vue-waterfall-easy； 一、获取vue-waterfall-easy组件 这里有两种...
实现效果：实现代码以及注释： <!DOCTYPE html> <html> <head><title>按钮绑定</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style type="text/css">*{margin: 0;padding: 0;}body{font: 15px/1.3 Open Sans, sans-serif;color: #5e5b64;text-align: center;}a, a:visited{outline: none;color: #3b9dc1;}a:hover...
前言 已经有好久没有更新博客了，大三下了要准备找实习了，才发现自己很多东西都不会，所以赶紧找了个现在流行的MVVM框架学习一下。我学习的是Vue，所以拿Vue写了一个FullPage的模板，可以供自己和其他人使用。 项目的地址是：https://github.com/hzxszsk/vue-fullpage项目讲解 为了加深理解，我把我制作这个FullPage页面的思路和流程记录下来，也可以给其他和我一样的初学者一个参考。 分解思路 首先，我根据Vue的组件开发思想，把...