精华内容
下载资源
问答
  • 使用了vantUI框架(Tabbar标签页)组件,开发了个页脚固定导航: 我操作说明: 登录页 /login 登录成功后,进入首页 / 然后选择首页页脚导航,个人中心 /personal 发现在点击个人中心返回按钮时候,直接...

    使用了vantUI框架的(Tabbar标签页)组件,开发了个页脚固定导航:


    我的操作说明:

    1. 登录页 /login
    2. 登录成功后,进入首页 /
    3. 然后选择首页页脚导航,个人中心 /personal

    发现在点击个人中心返回按钮的时候,直接返回到了登录页,为什么呢?


    原因分析 · (源码分析):

    在这里插入图片描述

    • 经过项目对应文件的源代码查看(导航组件【代码如下】)和 vantUI组件的官方解说,原来是因为使用了 关键词:replace (是否在跳转时替换当前页面历史),导致页面的历史路由记录被替换了。所以浏览器点击返回的时候,直接回到了登录页。

    导航组件 · 代码如下:(修改前)

    <section class="footer-fixed">
          <div class="ft-content">
            <!-- 路由模式 -->
            <van-tabbar v-model="activeFooterBar" active-color="#333" inactive-color="#333" route>
              <van-tabbar-item replace to="/">
                <span>首页</span>
                <template #icon="props">
                  <img :src="props.active ? iconHome.active : iconHome.inactive" />
                </template>
              </van-tabbar-item>          
              <van-tabbar-item v-if="hasLogin == true" replace to="/chatRoom" class="chat-bar">
                <span>论坛</span>
                <template #icon="props">
                  <div class="chat-bar-abs">
                    <img class="chat-img" :src="props.active ? iconChatMode.active : iconChatMode.inactive" />
                  </div>              
                </template>
              </van-tabbar-item>
              <van-tabbar-item v-if="hasLogin == false" @click="agreeToGoLogin" class="chat-bar">
                <span>论坛</span>
                <template #icon="props">
                  <div class="chat-bar-abs">
                    <img class="chat-img" :src="props.active ? iconChatMode.active : iconChatMode.inactive" />
                  </div>              
                </template>
              </van-tabbar-item>
              <van-tabbar-item v-if="hasLogin == true" replace to="/personal">
                <span>我的</span>
                <template #icon="props">
                  <img :src="props.active ? iconPersonal.active : iconPersonal.inactive" />
                </template>
              </van-tabbar-item>
              <van-tabbar-item v-if="hasLogin == false" @click="agreeToGoLogin">
                <span>我的</span>
                <template #icon="props">
                  <img :src="props.active ? iconPersonal.active : iconPersonal.inactive" />
                </template>
              </van-tabbar-item>
            </van-tabbar>
            <router-view />
          </div>
        </section>
    

    解决办法:

    • 删除关键词:replace,即可。(已验证OK)

    展开全文
  • vue3+vant 移动端应用(1)

    千次阅读 2019-05-27 03:47:17
    安装Vant npm i vant -S 主要问题如何按需引用、REM适配 按需引入 babel-plugin-import 会在编译过程中将 import 写法自动转换为按需引入方式 //安装命令 npm i babel-plugin-import -D 复制代码 安装之后新...

    安装Vant

    1. npm i vant -S 主要问题如何按需引用、REM适配
    2. 按需引入
    babel-plugin-import 会在编译过程中将 import 的写法自动转换为按需引入的方式
    //安装命令
    npm i babel-plugin-import -D
    复制代码
    1. 安装之后新建立babel.config.js文件
    //babel.config.js
    module.exports = {
      presets: [
        '@vue/app'
      ],
      plugins: [
        ['import', {
          libraryName: 'vant',
          libraryDirectory: 'es',
          style: true
        }, 'vant']
      ]
    }
    
    复制代码

    4.这样就可以直接使用了,在main.js文件夹引入

    import Vue from 'vue'
    import { Button } from 'vant';
    Vue.use(Button);
    复制代码

    rem适配

    1. 安装两个插件
    npm i postcss-pxtorem -S
    npm i amfe-flexible -S
    复制代码
    1. 根据vue3提供的新配置方法,在vue-config.js中对CSS做配置:
    const autoprefixer = require('autoprefixer');
    const pxtorem = require('postcss-pxtorem');
    module.exports = {
        css:{
          sourceMap:false,
          loaderOptions: {
            postcss: {
              plugins: [
                autoprefixer(),
                pxtorem({
                  rootValue: 37.5,
                  propList: ['*']
                })
              ]
            }
          }
        }
    }
    
    复制代码
    1. rootValue  75.0的值其实就是代表ui设计稿的750px的像素,引用的时候css直接写宽750px就相当于100%,它会自动根据屏幕进行计算成rem,无需对原测量值进行REM的换算(这里推荐37.5,结合2x的设计图开发,因为vant的组件你会发现37.5更为适合)。
    2. 在main.js文件夹下引入
    import 'amfe-flexible';
    复制代码

    这样就可以在html下对于font-size进行计算。达到自适应的,直接安照UI设计稿750px写像素单位,开发更加高效。

    展开全文
  • NavBar妙用 区分微信公众号和手机端 判断浏览器是微信 // 判断是否是微信环境 export let isWeChat = function() { const ua = navigator.userAgent.toLowerCase(); if (/MicroMessenger/i.test(ua)) return ...

    NavBar的妙用

    区分微信公众号和手机端

    判断浏览器是微信

    // 判断是否是微信环境
    export let isWeChat = function() {
      const ua = navigator.userAgent.toLowerCase();
      if (/MicroMessenger/i.test(ua)) return true;
      else return false;
    };
    复制代码
    1. NavBar组件封装,components文件下新建NavBar.vue文件
    <template>
      <div id="NavBar">
        <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
      </div>
    </template>
    export default {
      // title:用来显示当前网页的title
      props: ["title"],
      methods: {
        onClickLeft() {
          // 点击回退的时候当做地址回退
          this.$router.go(-1);
        }
      }
    };
    
    #NavBar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
    }
    复制代码
    1. App.vue页面引入组件
    <template>
      <div id="app">
        <NavBar v-show="navShow" :title="title"></NavBar>
        <!-- 如果显示NavBar的时候给路由添加一个类让其将NavBar的高度空出来 -->
        <div style="height:100%" :class="{child: navShow}">
          <transition :name="transitionName">
            <router-view class="router"></router-view>
          </transition>
        </div>
      </div>
    </template>
    <script>
    import NavBar from "./components/NavBar.vue";
    // 引入判断微信的方法
    import { isWeChat } from "lputils";
    export default {
      components: {
        NavBar
      },
      data() {
        return {
          transitionName: "fade",
          navShow: false
        };
      },
      mounted() {
        //检测浏览器类型决定是否展示栏
        let isWe = isWeChat();
        this.navShow = !isWe;
        this.title = this.$route.meta.title;
      },
      // 基于路线变化的动态设置路由切换动画
      watch: {
        $route(to, from) {
          this.title = to.meta.title;
          const toDepth = to.path.split("/").length;
          const fromDepth = from.path.split("/").length;
          if (toDepth != fromDepth) {
            this.transitionName =
              toDepth < fromDepth ? "slide-right" : "slide-left";
          } else {
            this.transitionName = "fade";
          }
        }
      }
    };
    </script>
    <style scoped>
    #router_box {
      position: relative;
      height: 100%;
    }
    .router {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #f5f5f5;
      transition: all 500ms ease;
      box-shadow: -2px 0 30px rgba(0, 0, 0, 0.1);
    }
    .child {
      height: 100%;
      padding-top: 46px;
    }
    .child > div {
      height: 93%;
      height: calc(100% - 46px);
    }
    
    .slide-left-enter,
    .slide-right-leave-active {
      transform: translate(100%, 0);
      z-index: 1000;
    }
    /*解决页面层级显示在滑动上层问题*/
    .slide-left-leave-active,
    .slide-left-leave-to {
      z-index: 0;
    }
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
    </style>
    复制代码

    更多判断函数

    //判断是否是iOS设备
    export let isIos = () => {
      const ua = navigator.userAgent.toLowerCase();
      if (/(iPhone|iPad|iPod|iOS)/i.test(ua)) return true;
      else return false;
    };
    
    //判断是否是QQ环境
    export let isQQ = function() {
      const ua = navigator.userAgent.toLowerCase();
      if (ua.match(/\sQQ/i) !== null) return true;
      else return false;
      
    };
    
    //判断是否是Android环境
    export let isAndroid = function() {
      var ua = navigator.userAgent.toLowerCase();
      if (/Android/i.test(ua)) return true;
      else return false;
    };
    复制代码
    展开全文
  • Vant

    2020-09-17 21:33:02
    是有赞移动端组件库 Vant 小程序版本,两者基于相同视觉规范,提供一致 API 接口,助力开发者快速搭建小程序应用。 在新项目中使用 Vant 时,推荐使用 Vue 官方提供脚手架 Vue Cli 创建项目 一:安装 npm ...

    轻量,可靠的移动端Vue组件库
    是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。

    在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目

    一:安装

    npm install -g @vue/cli

    ***通过 npm 安装在现有项目中使用 Vant 时,可以通过npm或yarn安装

    通过 npm 安装
    npm i vant -S

    通过 yarn 安装
    yarn add vant
    二:使用

    推荐手动按需引入组件

    安装插件

    1   推荐手动按需引入组件
    2  安装插件
    

    npm i babel-plugin-import -D

    // 在.babelrc 中添加配置
    // 注意:webpack 1 无需设置 libraryDirectory

    {
    “plugins”: [
    [“import”, {
    “libraryName”: “vant”,
    “libraryDirectory”: “es”,
    “style”: true
    }]
    ]
    }

    // 对于使用 babel7 的用户,可以在 babel.config.js 中配置

    module.exports = {
    plugins: [
    [‘import’, {
    libraryName: ‘vant’,
    libraryDirectory: ‘es’,
    style: true
    }, ‘vant’]
    ]
    };

    接着可以在代码组件中直接引入你所需要的Vant组件
    第一种方式:

    import Vue from ‘vue’;
    import { button } from ‘vant’;
    Vue.use(button);

    第二种方式:

    import { Button } from “vant”;

    1
    

    components: {
    [Button.name]:Button
    },

    引入即可使用 “有的或许引入后发现没有样式”

    那就在main.js中写上
    import ‘vant/lib/index.css’;

    
    
    
    展开全文
  • 主要介绍了详解vantUI框架在vue项目中的应用踩坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • order_APP:我在微信环境中开发基于vantUI自助订购应用
  • 延迟加载 瀑布流上拉加载新数据时,给予一定延迟效果,让数据加载不要太快(不要感觉... // 返回一个Promise对象,应用端可以设置async/await使得异步变为同步, // 同步可以使得后续代码都按照先后顺序执行 re
  • vantUI框架在vue项目中的应用踩坑

    万次阅读 2018-07-23 17:17:21
    参考地址编辑方面的应用。 1.订单提交地址等组件的应用。 使用的组件有如下: import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' 主要是配货地址编辑这块; &lt;van-address-...
  • Vant 1. 介绍 Vue移动组件库 => Vant【有赞】 => 更新维护快 Vue PC组件 => element-ui【饿了么】 => 更新维护快 vant官方网站: https://youzan.github.io/vant/#/zh-CN/ 其他常用Vue移动端开发UI...
  • 为了解决以上问题,提高用户体验,就出现了懒加载方式来减轻服务器压力,优先加载可视区域内容,其他部分等进入了可视区域再加载,从而提高性能。懒加载可以降低不必要服务器资源开销。 给文章图片设置懒加载...
  • Vant Weapp 是有赞移动端组件库 Vant 小程序版本,两者基于相同视觉规范,提供一致 API 接口,助力开发者快速搭建小程序应用
  • 查看配置文件package.json文件是否有element-ui版本信息 在main.js中引入: 当然也可以按需引入Element UI组件 安装babel-plugin-component: 然后,将.babelrc修改为: 接下来,如果您只希望保留部分组件,...
  • vant框架DropdownMenu 下拉菜单组件在小程序中的应用 官方文档实例: <van-dropdown-menu> <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" /> <van-dropdown-item value="{{ ...
  • 框架简介Vant Weapp 是有赞移动端组件库 Vant (一款基于Vue 轻量移动UI框架) 小程序版本,两者基于相同视觉规范,提供一致 API 接口,助力开发者快速搭建小程序应用Vant Weapp基于有赞 Zanui 组件库进行...
  • Vant官方示例合集,包含了VantVant Weapp和Vant Cli相关示例,详细内容请打开各目录查看。 目录结构 ├── vant # Vant 相关示例 │ ├── vue2 使用 Vue 2、Vant 2、Vue Cli 搭建应用 │ ├── vue3 使用 ...
  • Vant Weapp 是有赞移动端组件库 Vant 小程序版本,两者基于相同视觉规范,提供一致 API 接口,助力开发者快速搭建小程序应用两大参考神兽:1:桌面新建一个vant文件夹2:打开微信开发者工具,在这个文件里新建...
  • 一.vue-router 1.安装 ①直接下载/CDN ...在 Vue 后面加载 vue-router,它会自动安装: <script src="/path/to/vue.js"></script> <script src="/path/to/vue-router.js"&g...
  • 今天在使用mpvue开发微信小程序过程中需要实现一个底部上拉选择列表功能,因为之前做过H5微信公众号开发,使用就是有赞的Vant-ui,所以第一时间就想到了有赞的Vant Weapp UI框架,就找到了官网,根据官网...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 276
精华内容 110
关键字:

vant的应用