vue 实现淘宝筛选组件

Vue实现仿淘宝商品详情属性选择的功能

Vue实现仿淘宝商品详情属性选择的功能先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrAndValuees: [ { 'attrId': 1, 'attrName': '味道', 'valuees': [ { 'attrId': 1, 'value': '橘子味' }, { 'attrId': 2, 'value': '草莓味' }

vue+vue-cli+淘宝lib-flexible做移动端自适应

总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价main.js中引用flexible import 'lib-flexible' 3.由于在开发中rem和px手动转换比较麻烦,所以建议安装px2rem这个工具 3.1安装px2rem工具 npm install px2rem-loader --save-dev 3.2在vue-cli生成的文件中,找到

vue实现淘宝购物车功能

淘宝购物车功能,效果如下图非常简单的逻辑,没有做代码的封装,代码如下 <div class="list-container"> <div class="top-ops"> <div> <img src="../../../static/images/HomeRecommendShopInfoAdress@2x.png" alt=""> <span>浙江省杭州市...

vue仿淘宝地址选择组件

Vue组件:省市区地址选择组件 <template> <div v-show="addressSelectShow" :style="{'left': leftValue + 'px', 'top': topValue + 'px' }" class="content"> <ul class="area-select"> <li v-for="(item, index) in

vue实现淘宝商品详情页属性选择功能

方法一是自己想出来的,方法二来自忘记哪里看到的了不知道是不是你要的效果: 方法一:利用input[type="radio"] css代码: input { display: none; } input[type="radio"]+label { /* 默认label的样式 */ /* content: "\a0"; */ display: inline-block; padding: 10px 20px; background-color: #

vue仿淘宝订单状态的tab切换效果

<div class="navigation"> //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个navChange的方法来把index 传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值 <span v-for="(item, index) in navItems" v-touch:tap=" { event: navChange, p

vue仿淘宝结账订单

<template> <div class="container"> <div class="checkout-title"> <span>购物车</span> </div> <table class="product_table"> <tbody> <template v-for="(list,index) in

【UI】为项目添加类似于淘宝筛选列表勾选的ui-choose

jQuery下载的地址:http://www.htmleaf.com/jQuery/Form/201512182916.html GitHub地址:https://github.com/wangxing218/ui-choose 具体的使用步骤,大家自行百度就可以搜索到,原始的效果如下: 这个插件的主要思想,就是将页面上绑定的<select>中的<option>转变成了<ul>和<li>!!!!! ==============================

jQuery实现淘宝购物车小组件

我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章将实现淘宝购物车小组件, 用原生js可以实现吗,当然可以,可是就是任性一回,就是想用jQuery 来实现下.HTML代码不多才4行,CSS样式也不多,主要是功能,你要是能在里面输入除了0~20的整数, 算我输,嘿嘿.主要需求就是购物车里的商品可以是0到20件,少了不行,多了装不下,就是这样.(记得如果有bug就留言我哦,我快马加鞭改bug,不过不能有bug,自信...) 效果如下: 主要是jQuery部分,每一行都有详细注释,欢迎一

仿淘宝 vue

最近自己闲着无聊,用vue仿照淘宝打算写个皮囊,顺便把遇到的问题顺便记录下 1.动画问题 (1)单个元素给动画 <transition name="fade"></transition> (2)多个元素给动画,也就是动画列表 <transition-group name="slide-fade" mode="out-in"> <div v-for="item in list" :key

Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）

一.前言在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变 2.在购物车点击加减按钮,数值做出对应变化二.主要内容 1.实现效果:点击购物车的时候可以查看到购物车的商品信息 2.解决刷新,购物车上数值不变 (1)新建一个Cart.vue展示购物信息,并将路由添加到index.js中 (2)购物车里面涉及到:存储商品信息,

vue实现结算淘宝购物车效果

实现单选时的价格,全选时价格单选效果图全选效果图 html <template>  <div class="settlement-bill"> <div class="settlement-group"> <div class="settlement-item" v-for="(item,index) in items" :key=&qu

使用淘宝镜像cnpm安装Vue.js

简介: Vue.js是前端一个比较火的MVVM框架, 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件安装方式: 第一种:使用npm,比较适合比较大型的应用,由于npm是国外的,使用起来比较慢: 第二种:使用淘宝的cnpm镜像来安装vue: 步骤: 首先我们需要下载npm,安装好了node.js,就安装了npm.然后,再利用npm安装淘宝镜像的cnpm. 1.打开cmd,输入命令

OAuth2 通用组件源码下载(支持新浪微博、QQ、淘宝)(转载)

转载地址:http://www.cyqdata.com/download/article-detail-54302 OAuth2 社区通用组件说明: 源码为C#(.NET)写成,目前支持新浪微博.QQ.淘宝. 其它类型和界面,可以根据自己需要,下载源码扩展或调整. 使用本组件,只需要几行代码,就可以在网站上集成以下效果: 相关文章及使用说明: 1:通用社区登陆组件技术分享(开源)上篇:OAuth 授权登陆介绍 2:通用社区登陆组件技术分享(开源)中篇:OAuth 登陆组件

摘自淘宝的js地区组件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

vue实现仿淘宝结账页面

这个demo,是小颖基于之前的 vue2.0在table中实现全选和反选文章进行更新后的demo,主要功能呢,是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面,具体页面效果请看下面的动图:(如果大家发现有什么问题请及时提出帮小颖改正错误呦,谢谢啦嘻嘻) 效果图: 更新后的home.vue <template> <div class="container"> <div class="checkout-title"> &l

vue mint-ui 实现省市区街道4级联动（仿淘宝京东收货地址4级联动）

demo及源码地址 https://github.com/artiely/citypicker 先去下载一个“省份.城市.区县.乡镇” 四级联动数据,然后引入 import { Picker } from 'mint-ui'; //前提是npm install mint-ui -S Vue.component(Picker.name, Picker); 组件使用 <mt-picker :slots="addressSlots" class="picker"

vue使用npm install安装太慢连接不上(设置使用淘宝镜像)

当使用默认的npm install速度太慢时候,可以配置使用淘宝镜像 npm config set registry https://registry.npm.taobao.org

发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）

一.前言总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签既然HTML标准已经废弃了这个标签,现在工作上用的是Vue,所以想着能不能自己也发布一个基于Vue的文字跑马灯组件包,这样别人可以通过npm install ...就可以用,想想还有点激动,于是开始我的第一个npm组件之旅! 二.用npm发布一个包有点惭愧,之前通过npm install ...安装pac

淘宝应对"双11"的技术架构分析

原文地址:http://kb.cnblogs.com/page/193670/ 双“11”最热门的话题是TB ,最近正好和阿里的一个朋友聊淘宝的技术架构,发现很多有意思的地方,分享一下他们的解析资料: 淘宝海量数据产品技术架构数据产品的一个最大特点是数据的非实时写入,正因为如此,我们可以认为,在一定的时间段内,整个系统的数据是只读的.这为我们设计缓存奠定了非常重要的基础. 图1 淘宝海量数据产品技术架构按照数据的流向来划分,我们把淘宝数据产品的技术架构分为五层(如图1所示),分别是数据源.计

vue 实现淘宝 筛选 组件

热门专题

vue 实现淘宝筛选组件