首页
- ul列表触底加载更多数据
使用外部UI库mint-ui，infinite-scroll无限滚动指令，实质就是滚动距底部一定距离，执行方法进行数据请求。
- Foot组件的点击切换和跳转其他页面
- Foot组件底部导航图标
.active切换
遍历列表生成底部导航图标，通过location.search拿到查询参数，qs.parse( )解析得到CurIndex（默认初始值0），动态绑定class通过index==CurIndex判断是否激活active类。
- 点击跳转
click后，把点击图标的index作为查询参数放到location.href上实现跳转。
methods: {
changeNav(list, index) {
location.href = `${list.href}?index=${index}`;
}
}
列表页（search.html）
- top按钮显现
监听touchmove事件，document.doucumentElement.scrollTop > 200显现
- 点击top按钮滚动到顶部的过渡效果
使用第三方库velocity-animate
import Velocity from 'velocity-animate'
toTop(){
Velocity(document.body,"scroll"，{duration: 1000})
}
vue组件通信的方式
- down-props
- 自定义事件
$emit()
- 全局事件bus
- vuex 状态管理
个人主页/收货地址管理
- 路由配置
嵌套路由，在个人主页里面还嵌套有子路由
let routes = [{
/* 路由配置 */
path:'/',
component: member,
},{
path: '/address',
component: address,
/* 嵌套路由 */
children:[{
path: '',
redirect: 'all' /* 重定向跳转到/all */
},{
name:'all',
path:'all',
component:all,
},{
name: 'form',
path:'form',
component:form,
}]
}]
- 路由跳转的方式
- 声明式导航 （router-link 动态绑定to属性）
<router-link :to="{name:'form' ,query:{type:'add'}}">
- 编程式导航（
this.$router）
除了使用<router-link>创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，在 Vue 实例内部，你可以通过$router访问路由实例
toEdit(list){
// this.$router.push({path:'/address/form'})
// 编程式导航
this.$router.push({name:'form',query:{
type: 'edit',
instance: list,
}})
},
- 总结：
不论是声明式导航还是编程式导航，获取路由跳转后的参数都是this.$route。
3. vuex状态管理
地址列表的初始化，添加，删除，更新，设为默认地址都是通过vuex仓库状态管理。
创建一个store包含三部分
const store = new Vuex.Store({
state:{
lists: null,
},
mutations:{
// 同步操作
init(state,lists){
state.lists = lists
}
},
actions:{
// 异步操作
getLists(){
axios.get(url.addressLists).then(res=>{
// commit触发传入数据,触发init方法
store.commit('init',res.data.lists)
})
}
}
- state
获取状态对象，通过this.$store.state获取
- mutations
直接修改state，但是只能是同步操作，通过this.$store.commit执行。
- actions
通过commit mutations 间接的修改state，可以包含异步操作， 通过this.$store.dispatch调用。
