29、地址列表

ok,这章讲下地址列表,我们使用有vant组件来快速完成这部分的功能。 Github:https://github.com/Ewall1106/mall

1、写在开头

地址列表

2、使用AddressList

(1)首先我们在main.js中引入并注册这个组件。

main.js中注册及引入

(2)然后我们再去页面中使用这个组件

  • 我们把官网中的实例代码复制到我们的address.vue文件中,修改部分API参数:

使用Addresslist组件

  • 就这么简单,我们看看页面的初步呈现效果 :

地址列表初步呈现效果

3、改变颜色

(1)关于颜色的改变前面在做轮播图的时候我们已经处理过,当时我们的解决方法是用在开发中工具中找到它的class类名,然后我们使用vue的穿透选择器改变这个类名的基本样式,从而实现样式的覆盖。

(2)这里我们说另一种更好方法

  • 我们去vant官网定制主题中可以看到,官网是这样说的:

Vant提供了一套默认主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。

  • 那么,什么是BEM? 其实这个我理解的也不是很透彻,不过大概就是一种设计思想,将css的命名进行了规范,然后就是抽离了css样式文件,一个样式对应一个html块,我这里丢两篇文章,大家可以看看: CSS BEM 书写规范 如何看待 CSS 中 BEM 的命名方式?

(3)ok,到这里我们就要改变这个组件的样式,怎么做?

  • 首先,我们新建一个overiride.css文件,专门用于覆盖组件的样式;
  • 然后,我们F12打开开发者工具,看看这个AddressList.vue图标类名;

F12开发者工具

  • 同理,改变底部button颜色为我们的主体色也是如此:

override.css的内容

  • 然后我们在main.js中引入这个css文件

main.js中引入override.css

4、小结

这就是我们的地址列表了基本结构了,借助vant的AddressList组件,我们可以快速的完成地址列表的功能;其次就是改变主题的颜色了,你也可以自己去官网看看其他的方法,也可以自己定制一套,大家感兴趣就自己去折腾了。

参考学习 有赞Vant组件库的引入 AddressList地址列表 CSS BEM 书写规范 如何看待 CSS 中 BEM 的命名方式?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小狼的世界

IE支持而Firefox不支持的CSS属性

10420
来自专栏知道一点点

webstorm快捷键收集【转发】 WebStorm快捷键收集

13720
来自专栏君赏技术博客

Xcode8时代让我们一起继续使用我们的插件吧

第一步复制一份你从AppStore下载最新Xcode8。正版授权的我们命名为Xcode_Release用于我们发版本使用。复制出来的一份我们改成Xcode.

10130
来自专栏落花落雨不落叶

Chrome的First Paint触发的时机探究

15030
来自专栏破晓之歌

AI-icon制作 原

9450
来自专栏mathor

matlab—图形界面(GUI)程序设计

matlab也能做应用程序,类似于c++的mfc,这点我也是才知道,大吃一惊,原来现在可视化编程应用如此广泛,连matlab都可以,接下来我就会讲解如何通过ma...

37620
来自专栏数据小魔方

动态图表系列4|列表框(index函数)

今天跟大家分享动态图表系列3——列表框(index函数)! 数据与之前的数据一致,核心技巧只有两点: 使用列表框制作动态数据源; 使用 动态数据源插入动态图表。...

35770
来自专栏听雨堂

CSS实现按钮的两张图片的同步出现

      通过图片交换实现了按钮图片,但是存在一个问题,老是先加载一个图片,另外一个却加载得慢,效果反而不好。这是网上的解决方法,实现css图片的预加载: <...

22190
来自专栏落花落雨不落叶

Chrome的First Paint触发的时机探究

38080
来自专栏DannyHoo的专栏

xcode7中KSImageNamed-Xcode-master插件无法使用问题的解决

Xcode 升级到7之后VVDocumenter-Xcode,OMColorSense,KSImageNamed等一系列的插件失效的解决办法,以及不小心误点了...

8410

扫码关注云+社区

领取腾讯云代金券