1. 城市选择页面路由配置
src/router/index.js
import Home from '@/pages/home/Home' //引入组件
export default new Router({
routes: [{
path: '/', //路径
name: 'Home', //路由名字
component: Home //对应的组件
}]
})
使用路由
<router-link to="/">
...
</router-link>
2. 搜索框布局
-
position
适用范围:不规律布局
绝对定位使用条件:绝对定位使用通常是父级定义position:relative定位
,子级定义position:absolute
绝对定位属性,并且子级使用left或right和top或在这里插入代码片bottom进行绝对定位。 -
参考另一篇博文:《CSS position最容易的理解》
https://blog.csdn.net/qq_23111247/article/details/83539466
3. 列表布局
- 伪类
:before
和:after
在元素前或者后插入内容,例如:
p:after
{
content:"我在结尾!";
background-color:yellow;
}
stylus中:
.border-topbottom
&:before
border-color: #ccc
4. Better-scroll 的使用及字母表布局
- Github下载Better-scroll插件: https://github.com/ustbhuangyi/better-scroll
npm install better-scroll --save
- 使用
import BScroll from 'better-scroll'
const scroll = new BScroll(DOM)
- Vue.s中的ref :https://www.jianshu.com/p/3bd8a2b07d57