![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue项目
七锐.
且看烟高云低处,远眸尽过满落辰。
展开
-
Vue使用过滤器将时间戳转换成“发表时间+多久之前”
// 定义全局过滤器,如果时间戳是10位就乘以1000,如果是13位就不乘Vue.filter('filterTime',(oldTiem)=>{ let date = new Date(parseInt(oldTiem) * 1000); let nowTime = new Date let nowDate = nowTime.getDate() let time = "上午" if (date.getHours() > 12) { time = "下午" }原创 2021-01-22 14:50:07 · 285 阅读 · 0 评论 -
Vue 实现商品分类、列表、详情、购物车、搜索(vant)
商品分类Classify:<template> <div> <div style="display: flex;"> <div class="oneNav"> <!-- vant侧边导航 --> <van-sidebar style="height: 617px; white-space: nowrap; overflow-y: scroll;" v-model="activeKey">原创 2021-01-22 14:53:15 · 7257 阅读 · 1 评论 -
Vue实现导航切换
Vue实现导航切换:<template> <div> <div class="dbox"> <span @click="go('/')" :class="{'active':isActive=='/'}">指令</span> <span @click="go('/demo')" :class="{'active':isActive=='/demo'}">事件</span> <原创 2021-01-22 14:55:09 · 552 阅读 · 0 评论 -
解决H5页面左右滑动问题
在header里面加入禁止用户缩放<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">在代码模块最外面一层div 加上样式 style=“width:100%;overflow-x:hidden”原创 2021-01-22 14:57:15 · 1233 阅读 · 0 评论 -
Vue 跳转切换页面时左右滑动动画
1.给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter) const routes = [ { path: '/', name: 'search', meta:{index:0},//meta对象的index用来定义当前路由的层级,由小到大原创 2021-01-22 14:58:50 · 817 阅读 · 0 评论 -
Vant 商品规格sku用法
Vant 商品规格sku用法<template><div> <!-- 基础用法 --> <div> <van-sku v-model="showBase" :sku="skuData.sku" :goods="skuData.goods_info" :goods-id="skuData.goods_id" :h原创 2021-01-22 15:02:20 · 1635 阅读 · 0 评论 -
Vue 添加购物车并去重
从列表页添加到购物车并去重:addCart(val){ //添加购物车 let rel = true this.cart.map(item => { if (item.data.id == val.id) { item.num++ rel = false return } }) if(rel){ this.cart.push({ data:val, num:1原创 2021-01-22 15:14:25 · 229 阅读 · 0 评论 -
Vue 商品排序,筛选
<template> <div> <div class="home-nav"> <!-- 导航 --> <van-tabs @change="onNavs"> <van-tab v-for="(item,index) in navs" :name="item.cid" :title="item.cname"></van-tab> </van-tabs>原创 2021-01-22 15:15:41 · 1193 阅读 · 1 评论