精华内容
下载资源
问答
  • mui +vue 移动端demo

    2018-10-12 10:14:29
    使用mui+ vue开发,数据使用豆瓣api的top250,仿照现有教程写的页面,仅供参考
  • 本项目是由vue框架编写,相关内容涉及到了 Vue的 基础语法,包括实例、生命周期、指令、计算属性、方法、侦听器,表单等部分内容。适合刚入门的前端同学们进行参考学习,感谢大家的支持。
  • vue移动端页面demo

    2020-04-01 10:15:22
    1、主要从webpack搭建项目开始到移动端适配

    一、调查表页面(展示效果)
    根据网上许多移动端项目案例,总结其他方法,汇总方法如下。
    在这里插入图片描述
    二、vue移动端项目搭建
    1、在安装了node.js的前提下,使用以下命令

    npm install --g vue-cli
    

    2、在将要构建项目的目录下

    vue init webpack objName(项目目录名称)
    

    3、项目配置
    在这里插入图片描述
    4、assets中存放的静态文件是会经过webpack处理的,一般放一些图片之类的静态资源,而static则不会收到webpack的影响,调用的时候也是通过绝对路径调用的,通常用来存放一些第三方的静态资源库。
    5、移动端适配
    https://www.jianshu.com/p/2a091bd289ba
    https://www.jianshu.com/p/c7d4b1835eaf(我采用的方法)
    index.html中配置代码如下:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
       /* <meta name="viewport" content="width=device-width,initial-scale=1.0"> */
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title></title>
      /*   <script>
            (function () {
              // 在标准 375px 适配下,100px = 1rem;
              var baseFontSize = 100;
              var baseWidth = 375;
              var set = function () {
                var clientWidth = document.documentElement.clientWidth || window.innerWidth;
                var rem = 100;
                if (clientWidth != baseWidth) {
                  rem = Math.floor(clientWidth / baseWidth * baseFontSize);
                }
                document.querySelector('html').style.fontSize = rem + 'px';
              }
              set();
              window.addEventListener('resize', set);
            }());
          </script> */
      </head>
      <body>
        <div id="app"></div>
      </body>
    </html>
    

    6、安装移动端ui(可以同时在一个项目中安装多个ui框架)
    mint ui(组件较少) vant ui (组件较多) element-ui(主要用于PC端)
    main.js中引入:

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    //安装label(将es6语法转成es5语法)兼容多种浏览器
    import 'babel-polyfill'
    // 移动端适配
    import 'lib-flexible/flexible'
    // mint-ui组件
    import MintUI from 'mint-ui'
    import 'mint-ui/lib/style.css'
    // element-ui组件
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    // vant-ui组件
    import { Checkbox, CheckboxGroup } from 'vant';
    import 'vant/lib/index.css';
    
    
    // 引入axios
    import axios from 'axios'
    import qs from 'qs'
    Vue.prototype.$axios = axios  //全局注册,使用方法为:this.$axios
    Vue.prototype.qs = qs  //把json格式的直接转成data所需的格式 this.qs
    
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    Vue.use(MintUI);
    Vue.use(ElementUI);
    Vue.config.productionTip = false
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    

    7、安装babel-cli将es6转es5 (可以解决有些兼容问题)

    npm install --global babel-cli
    

    在vue2.0中.babelrc文件中配置如下:

    {
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
        "stage-2",
        ["es2015"] 
      ],
      "plugins": ["transform-vue-jsx", "transform-runtime"]
    }
    

    8、build.js文件中如下:

    'use strict'
    require('./check-versions')()
    
    process.env.NODE_ENV = 'production'
    
    const ora = require('ora')
    const rm = require('rimraf')
    const path = require('path')
    const chalk = require('chalk')
    const webpack = require('webpack')
    const config = require('../config')
    const webpackConfig = require('./webpack.prod.conf')
    
    const spinner = ora('building for production...')
    spinner.start()
    
    rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
      if (err) throw err
      webpack(webpackConfig, (err, stats) => {
        spinner.stop()
        if (err) throw err
        process.stdout.write(stats.toString({
          colors: true,
          modules: false,
          children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
          chunks: false,
          chunkModules: false
        }) + '\n\n')
    
        if (stats.hasErrors()) {
          console.log(chalk.red('  Build failed with errors.\n'))
          process.exit(1)
        }
    
        console.log(chalk.cyan('  Build complete.\n'))
        console.log(chalk.yellow(
          '  Tip: built files are meant to be served over an HTTP server.\n' +
          '  Opening index.html over file:// won\'t work.\n'
        ))
      })
    })
    

    三、项目目录
    在这里插入图片描述
    9、组件Questionnaire.vue文件中代码如下:(即展示页面效果)

    <template>
            <div class="form-box">
              <h2>name</h2>
              <h3>调查表</h3>
              <mt-field label="联系电话" placeholder="请输入联系电话" type="tel" v-model="form.phone"/>
              <mt-field label="邮 箱" placeholder="请输入邮箱" type="email" v-model="form.email"/>
              <template>
              <el-divider>名称</el-divider>
                <van-checkbox-group v-model="form.productList" direction="horizontal" @change="handleProduct">
                  <van-checkbox v-for="(item,index) in products" :key="index" shape="square" :name="index" checked-color="#07c160" icon-size="18px">{{item}}</van-checkbox>
                </van-checkbox-group>
              </template>
              <h4 style="font-size: 0.42rem;margin-top: 0.36rem;">满 意 度 评 价</h4>
             <el-divider >服务类</el-divider>
              <div class="block">
               <span class="rate-label">服务态度</span>
               <el-rate
                 v-model="form.attitude"
                 show-text>
               </el-rate>
              </div>
             <div class="block">
              <span class="rate-label">服务态度</span>
              <el-rate
                v-model="form.attitude"
                show-text>
              </el-rate>
             </div>
             <div class="block">
              <span class="rate-label">服务态度</span>
              <el-rate
                v-model="form.attitude"
                show-text>
              </el-rate>
             </div>
             <div class="block">
              <span class="rate-label">服务能力</span>
              <el-rate
                v-model="form.capability"
                show-text>
              </el-rate>
             </div>
       </div>
    </template>
    <script>
    import {Indicator } from 'mint-ui';
    import Button from 'vant/lib/button';
    import 'vant/lib/button/style'; 
    export default {
      data() {
        return {
          isClick:false,
          loading:false,
          form:{
            phone:'',
            email:'',
            //服务类
            attitude:0,
            capability:0,
            expect:'',
            productList:[],
          },
          texts:['极差', '失望', '一般', '满意', '非常满意'],
      },
      // created() {
      //   this.$nextTick(() => {
      //     this.getDatas()
      //   })
      // },
      methods: {
        showDropList() {
              var _this = this
              var selectDiv = document.getElementById("select-input")
              this.isClick=true
            },
            handleProduct(){
              console.log(arguments,'选择值')
              console.log(this.form.productList,'12123')
            },
            // 提交数据
            doSubmit(){
              console.log(this.form,'保存数据')
              // 调用后台接口
            //   this.$axios({
            //     method:'post',
            //     url:'api',
            //     data:this.qs.stringify({    //这里是发送给后台的数据
            //           userId:this.userId,
            //           token:this.token,
            //     })
            // }).then((response) =>{          //这里使用了ES6的语法
            //     console.log(response)       //请求成功返回的数据
            // }).catch((error) =>
            //     console.log(error)       //请求失败返回的数据
            // })
              var _this = this;
              Indicator.open({
                          text: '提交调查表...',
                          spinnerType: 'fading-circle'
              });
             this.timer = setTimeout(function(){
             console.log(this); // 这里的this指向window对象
              // _this.$router.push('/home');
             Indicator.close();
              }, 2000)
            },
      }
    }
    </script>
    
    <style >
    * {
      padding: 0;
      margin: 0 ;
    }
    .form-box{
      width: 100%;
    }
    .mint-indicator.mint-indicator-wrapper{
    /* 点击提交时显示状态*/
        z-index: 2
    }
    .block{
      display: flex;
      flex-direction: row;
      justify-items: flex-end;
      align-items: center;
    }
    /*多选框对齐*/
    .van-checkbox--horizontal {
        margin-right: 0.342857rem;
        width: 28.3%;
    }
    </style>
    

    10、em和rem的区别:

    在css中单位长度用的最多的是px、em、rem,这三个的区别是:
      px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
      em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。
    	对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。
    	rem中的r意思是root(根源),这也就不难理解了。
    
    展开全文
  • vue移动端demo资料

    2018-09-06 16:04:00
    http://imzjh.com/inew/#/(移动端demo) https://github.com/liangxiaojuan/eleme(饿了么git地址)https://github.com/javaSwing/NeteaseCloudWebApp(网易云音乐 git) 移动端布局网址 ...
    http://imzjh.com/inew/#/(移动端demo)

     

    https://github.com/liangxiaojuan/eleme(饿了么git地址)


    https://github.com/javaSwing/NeteaseCloudWebApp(网易云音乐 git)

     

     

    better-scroll官网     用于移动端滚动效果
    
    https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88

     

     

    http://adcentury.github.io/vue-weui/#!/(布局  vue-weui   )
    https://www.npmjs.com/package/vue-weui(vue-weui 概述)

     

     

     

     

     

    作者:smile.轉角

    QQ:493177502

    转载于:https://www.cnblogs.com/websmile/p/9214508.html

    展开全文
  • vue移动端适配问题,px自动转换vw,跟设计稿直接计算匹配,非常方便准确 免c币下载地址 https://download.lllomh.com/cliect/#/product/F421745961449998
  • 在写移动端时,因为需要给页面做转场动画,便有了这次的研究其中最主要的时以下两个问题:浏览器导航栏的切换IOS 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,随后触发我们设置的转场动画。...

    在写移动端时,因为需要给页面做转场动画,便有了这次的研究

    其中最主要的时以下两个问题:

    浏览器导航栏的切换

    IOS 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,随后触发我们设置的转场动画。

    除了上面两个问题,其余的操作都是可以在页面内进行设置,基本都是可控的。主要就是解决上面两个问题。

    可以看下实际写出来的效果:在线DEMO

    1. 浏览器导航栏的切换

    通过记录 历史记录 来比较判断前进还是后退

    如下例子

    A页面 -> B页面 -> C页面

    假如我从 A页面到 B页面 再到C页面,历史记录就会产生3条

    我们用一个数组表示: ['/a', '/b', '/c']

    然后我在通过点击浏览器导航栏的后退按钮, 我便会回到 B 页面,

    这时候我只要判断是否存在 B页面, 存在就证明我点的时后退按钮。

    然后只要我后退过, 我就能点击浏览器的前进按钮了。这时候怎么判断它到底是前进的呢。

    我们可以这样。

    当我们后退到了B页面,历史记录不是还保存着['/a', '/b', '/c'] 三个路径吗

    我们可以删除B页面后面的路径,那现在就是 ['/a', '/b'];

    如果我们后退到A页面, 那么我们保存的路径就是['/a']

    只要我们点击前进按钮, 我们去保存的路径里面找, 是不是就找不到路径了, 那样就完成了前进判断。

    上面是一种正常的情况。

    但是假如我们有点页面重复进入了呢。

    就如以下这种情况

    A页面 -> B页面 -> C页面 -> B页面 -> C页面

    现在走了5步,到达了第二个C页面, 然后我们后退一步,到达了B页面

    这个时候问题就出来了,我们是删除第一个B页面后面的路径还是删除第二个B页面后面的路径

    我们先试着删除第二个B页面的路径,那么我们还保存的路径就是: ['/a', '/b', '/c', '/b']。

    那这个时候我们按照上面正常情况的逻辑来操作.

    我点击前进, 然后我去保存的路径里面找,找不到就算前进, 找到证明是后退。

    那么结果显而易见,我们找到了第一个C页面,那就这样就算后退了,但其实我点击的时前进

    那我们试着删除第一个B页面后面的路径,那么保存的路径就是: ['/a', '/b'],

    那么我在点击后退按钮,这时候他其实会进入C页面, 我们可以看以下流程图

    这个时候我们在此点击后退按钮,就会到C页面, 但是保存的路径里面 `'/c'` 已经被我删除了, 所以判断出来的是前进。

    如果我们过滤重复的页面路径,是不是就会好了呢,其实也是一样的

    假如我们有5个页面路径,过滤了2个重复的,只有3个页面路径了

    那么我退到第四个路径的时候是不是就找不到了, 那么后面两个页面都会算作前进。

    所以以目前来看,最好的办法就是记录每一个页面,但是每个页面,都让他有区别

    那么我们就可以在url上面放一个随机字符串

    代码实现:

    // 当没有key的时候会进入两次 beforeEach,我们只需保存带key的就行

    const updateNavigations = (to) => {

    if (to.query[pathKey]) {

    store.commit('UPDATE_NAVIGATIONS', {path: to.fullPath})

    }

    }

    router.beforeEach((to, from, next) => {

    let toIndex = store.state.navigations.findIndex(path => path === to.fullPath)

    if (toIndex >= 0) { // 存在该路径

    let len = store.state.navigations.length-1

    if (toIndex === len) { // 当前路径是最后一条,证明是同一个页面

    console.log('refresh')

    } else { // 后退

    store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: 'back' }) // 后退标志

    store.commit('DELETE_NAVIGATION', { index: toIndex }) // 删除当前路径后面的路径

    }

    }else{ // 不存在该路径

    store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: 'forward' }) // 前进标志

    updateNavigations(to) // 保存该连接

    }

    const query = { ...to.query }

    // 存在就直接next, 防止死循环

    if (!query['APP_KEY']) { // 不存在添加key ,再次 next

    query['APP_KEY'] = Math.random().toString(16).substring(2)

    next({ path: to.path, query})

    }else{

    next()

    }

    })

    以上代码我们就能就url中添加一个 APP_KEY 的随机串,那样就算同一个页面在我们保存的路径里面也是其实是不同的。就可以正常的执行逻辑了

    上面就基本解决了浏览器导航栏的问题了

    2. IOS上的滑动切换

    在IOS的网页上, 是可以左右滑动进行切换,即使你没有做转场动画。

    这个时候就会出现一个问题。

    还是ABC页面

    A -> B -> C

    当我们到达C页面,然后向左滑动时,滑完他就进入B页面,但是这这时它还是会进入我们的 beforeEach 这个钩子函数里面,执行我们上面的逻辑。

    那样就会触发我们的转场动画。你就会发现执行了两次切换。

    代码是这样的

    let touchEndTime = Date.now()

    window.addEventListener('touchend', () => {

    touchEndTime = Date.now()

    })

    router.beforeEach((to, from, next) => {

    if ((Date.now() - touchEndTime) < 377) { // ios滑动切换

    store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: '' })

    }

    })

    上面也很好理解, 就是我们取到手指最后离开的屏幕的那一刻, 然后在到 beforeEach里面进行比较,

    当手指离开屏幕的最后一刻跟我们自己 beforeEach里面进行的转场相差小于 337, 就算是IOS的滑动切换

    那样就解决了IOS的滑动切换问题了。

    但是IOS的右滑切换时监听不到手指离开屏幕的那一刻的(也不知道是什么鬼), 所以IOS的右滑切换,是没法像上面那样判断的。

    这个我也没找到解决办法, 暂时只能解决IOS左滑返回的切换。

    基本上遇到的比较麻烦的两个点就是上面这两个点了,其余都是可以通过监听事件进行设置,倒也没什么难度

    展开全文
  • vue移动端路由切换完整实例在写移动端时,因为需要给页面做转场动画,便有了这次的研究其中最主要的时以下两个问题:浏览器导航栏的切换IOS 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,随后...

    vue移动端路由切换完整实例

    在写移动端时,因为需要给页面做转场动画,便有了这次的研究

    其中最主要的时以下两个问题:

    浏览器导航栏的切换

    IOS 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,随后触发我们设置的转场动画。

    除了上面两个问题,其余的操作都是可以在页面内进行设置,基本都是可控的。主要就是解决上面两个问题。

    可以看下实际写出来的效果:在线DEMO

    1. 浏览器导航栏的切换

    通过记录 历史记录 来比较判断前进还是后退

    如下例子

    A页面 -> B页面 -> C页面

    假如我从 A页面到 B页面 再到C页面,历史记录就会产生3条

    我们用一个数组表示: ['/a', '/b', '/c']

    然后我在通过点击浏览器导航栏的后退按钮, 我便会回到 B 页面,

    这时候我只要判断是否存在 B页面, 存在就证明我点的时后退按钮。

    然后只要我后退过, 我就能点击浏览器的前进按钮了。这时候怎么判断它到底是前进的呢。

    我们可以这样。

    当我们后退到了B页面,历史记录不是还保存着['/a', '/b', '/c'] 三个路径吗

    我们可以删除B页面后面的路径,那现在就是 ['/a', '/b'];

    如果我们后退到A页面, 那么我们保存的路径就是['/a']

    只要我们点击前进按钮, 我们去保存的路径里面找, 是不是就找不到路径了, 那样就完成了前进判断。

    上面是一种正常的情况。

    但是假如我们有点页面重复进入了呢。

    就如以下这种情况

    A页面 -> B页面 -> C页面 -> B页面 -> C页面

    现在走了5步,到达了第二个C页面, 然后我们后退一步,到达了B页面

    这个时候问题就出来了,我们是删除第一个B页面后面的路径还是删除第二个B页面后面的路径

    我们先试着删除第二个B页面的路径,那么我们还保存的路径就是: ['/a', '/b', '/c', '/b']。

    那这个时候我们按照上面正常情况的逻辑来操作.

    我点击前进, 然后我去保存的路径里面找,找不到就算前进, 找到证明是后退。

    那么结果显而易见,我们找到了第一个C页面,那就这样就算后退了,但其实我点击的时前进

    那我们试着删除第一个B页面后面的路径,那么保存的路径就是: ['/a', '/b'],

    那么我在点击后退按钮,这时候他其实会进入C页面, 我们可以看以下流程图

    这个时候我们在此点击后退按钮,就会到C页面, 但是保存的路径里面 '/c' 已经被我删除了, 所以判断出来的是前进。

    如果我们过滤重复的页面路径,是不是就会好了呢,其实也是一样的

    假如我们有5个页面路径,过滤了2个重复的,只有3个页面路径了

    那么我退到第四个路径的时候是不是就找不到了, 那么后面两个页面都会算作前进。

    所以以目前来看,最好的办法就是记录每一个页面,但是每个页面,都让他有区别

    那么我们就可以在url上面放一个随机字符串

    代码实现:

    // 当没有key的时候会进入两次 beforeEach,我们只需保存带key的就行

    const updateNavigations = (to) => {

    if (to.query[pathKey]) {

    store.commit('UPDATE_NAVIGATIONS', {path: to.fullPath})

    }

    }

    router.beforeEach((to, from, next) => {

    let toIndex = store.state.navigations.findIndex(path => path === to.fullPath)

    if (toIndex >= 0) { // 存在该路径

    let len = store.state.navigations.length-1

    if (toIndex === len) { // 当前路径是最后一条,证明是同一个页面

    console.log('refresh')

    } else { // 后退

    store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: 'back' }) // 后退标志

    store.commit('DELETE_NAVIGATION', { index: toIndex }) // 删除当前路径后面的路径

    }

    }else{ // 不存在该路径

    store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: 'forward' }) // 前进标志

    updateNavigations(to) // 保存该连接

    }

    const query = { ...to.query }

    // 存在就直接next, 防止死循环

    if (!query['APP_KEY']) { // 不存在添加key ,再次 next

    query['APP_KEY'] = Math.random().toString(16).substring(2)

    next({ path: to.path, query})

    }else{

    next()

    }

    })

    以上代码我们就能就url中添加一个 APP_KEY 的随机串,那样就算同一个页面在我们保存的路径里面也是其实是不同的。就可以正常的执行逻辑了

    上面就基本解决了浏览器导航栏的问题了

    2. IOS上的滑动切换

    在IOS的网页上, 是可以左右滑动进行切换,即使你没有做转场动画。

    这个时候就会出现一个问题。

    还是ABC页面

    A -> B -> C

    当我们到达C页面,然后向左滑动时,滑完他就进入B页面,但是这这时它还是会进入我们的 beforeEach 这个钩子函数里面,执行我们上面的逻辑。

    那样就会触发我们的转场动画。你就会发现执行了两次切换。

    代码是这样的

    let touchEndTime = Date.now()

    window.addEventListener('touchend', () => {

    touchEndTime = Date.now()

    })

    router.beforeEach((to, from, next) => {

    if ((Date.now() - touchEndTime) < 377) { // ios滑动切换

    store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: '' })

    }

    })

    上面也很好理解, 就是我们取到手指最后离开的屏幕的那一刻, 然后在到 beforeEach里面进行比较,

    当手指离开屏幕的最后一刻跟我们自己 beforeEach里面进行的转场相差小于 337, 就算是IOS的滑动切换

    那样就解决了IOS的滑动切换问题了。

    但是IOS的右滑切换时监听不到手指离开屏幕的那一刻的(也不知道是什么鬼), 所以IOS的右滑切换,是没法像上面那样判断的。

    这个我也没找到解决办法, 暂时只能解决IOS左滑返回的切换。

    基本上遇到的比较麻烦的两个点就是上面这两个点了,其余都是可以通过监听事件进行设置,倒也没什么难度

    展开全文
  • vue仿lofter移动端demo

    2017-10-24 10:34:49
    vue_lofter 一个仿lofte手机端的vue项目 项目描述 技术栈 Vue2.0全家桶 + axios + Vuex ...预览地址(PC端建议在Chrome下开启调试模式或移动端浏览) ?源码地址✨✨求你的小星星~ 主要依赖 Vue2.0 前端页面展示 Styl...
  • vue移动端项目

    2018-05-17 10:32:00
    vue mint-ui jquery-weui写了一个移动端demo 技术栈 vue2.0 vue-router axios mint-ui jquery-weui webpack 页面截图 最后附上github地址 https://github.com/xue11hua/one_vue 欢迎star 转载...
  • vue移动端的左右滑动事件demo

    万次阅读 2018-03-21 11:24:49
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;...https://unpkg.com/vue"&gt;&
  • 终端输入vue create demo 选择第二个 填入 y 选择自己想要使用的 css 预处理器 选择第三个 选择第一个 选择第二个 填入 n(如果你想要下一次构建项目的时候也使用这些配置,就可以填入 y) 等待项目构建 ...
  • 这次给大家带来怎样使用vue移动端路由切换,使用vue移动端路由切换的注意事项有哪些,下面就是实战案例,一起来看一下。其中最主要的时以下两个问题:浏览器导航栏的切换IOS 上滑动切换时,会有两次页面的转场动画,...
  • "#app", data:{ flags: false, position: { x: 0, y: 0 }, nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '', }, methods: { // 实现移动端拖拽 down(){ this.flags = true;...
  • vue 移动端过渡效果 超速驾驶 (vue-overdrive) Super easy magic-move transitions for Vue apps, powered by Ramjet. 由Ramjet支持的Vue应用程序的超级轻松魔术移动过渡。 View demo 查看演示 Download Source ...
  • 在写移动端时,因为需要给页面做转场动画,便有了这次的研究 其中最主要的时以下两个问题: 浏览器导航栏的切换 IOS 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,随后触发我们设置的转场动画...
  • 基于Vue-Cli3的Vue移动端企业级工程架构 本项目是基于Vue-Cli3脚手架,应用VW的自适应解决方案构建的移动端企业级工程项目,下面会一步步构建起项目结构。大家也可以先下载源代码下来看下,再跟着操作。 Author: ...
  • vue移动端路由切换完整实例 在写移动端时,因为需要给页面做转场动画,便有了这次的研究 其中最主要的时以下两个问题: 浏览器导航栏的切换 IOS 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,...
  • vue 移动端粘性组件 威客贴纸 (vue-sticker) Vue component, that helps to make sticky effects Vue组件,有助于产生粘性效果 View demo 查看演示 Download Source 下载源 安装 (Installation) # install ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 442
精华内容 176
热门标签
关键字:

vue移动端demo

vue 订阅