ok,这章讲下地址列表,我们使用有vant组件来快速完成这部分的功能。 Github:https://github.com/Ewall1106/mall
地址列表
(1)首先我们在main.js
中引入并注册这个组件。
main.js中注册及引入
(2)然后我们再去页面中使用这个组件
address.vue
文件中,修改部分API参数:使用Addresslist组件
地址列表初步呈现效果
(1)关于颜色的改变前面在做轮播图的时候我们已经处理过,当时我们的解决方法是用在开发中工具中找到它的class类名,然后我们使用vue的穿透选择器改变这个类名的基本样式,从而实现样式的覆盖。
(2)这里我们说另一种更好方法
Vant提供了一套默认主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。
(3)ok,到这里我们就要改变这个组件的样式,怎么做?
overiride.css
文件,专门用于覆盖组件的样式;AddressList.vue
的√
图标类名;F12开发者工具
override.css的内容
main.js
中引入这个css文件main.js中引入override.css
这就是我们的地址列表了基本结构了,借助vant的AddressList组件,我们可以快速的完成地址列表的功能;其次就是改变主题的颜色了,你也可以自己去官网看看其他的方法,也可以自己定制一套,大家感兴趣就自己去折腾了。
参考学习