换一批能刷新和点击事件跳指定页面路径
静态布局 设计图是9个点 后续考虑接口问题 返回的数据数字值从0开始
(所以这边我把图片的盒子名称从0开始命名 方便后续index下标好对应上)
将数字替换index
这边我是把设计图 换一批 图标通过svg替代 因为vant没得 效果不影响
图片 再进行定位调好位置 自行慢慢调 (照抄出错)
.lea_0{
position: absolute;
left: 40px;
top: 240px;
height: 40px;
img{
width: 12px;
height: 12px;
position: absolute;
left: 50%;
bottom: -20%;
transform: translate(-50%,-50%);
}
}
定位完成 页面图片和字就搞定了 再调用方法内容 动态设置 根据接口进行内容渲染到页面 setCulture 方法是个啥 下面参考
上面第一步静态搞定 现在是动态了
第一步我们从点击换一批刷新事件下手
这边用的接口调用 一开始出错了 我没有做分页也就是page++ 所以每次刷新都是这个页面(下面参考)
把接口内容给定义的空数组去
避免页面内容不变这个错误问题就需要进行个page+1 这样就能保证 只要是触发事件 你的当前页就会换
同时还需要进行个重置 每次触发就能保证在切换内容 其实原理是重复的
其次就是 页面中9个点的内容问题 我是通过三层过滤 才能保证每次内容不一样
这边需要将vuex返回的数据 和 接口的数据进行对比 再对比 code是他们的数字相对于id
调用vuex数据 和接口数据 操作
这边操作完再把 res 的值 也就是过滤后的相同值进行一个赋值
最后就是看不到页面内容 我通过侦听器 watch 进行的页面内容显示
将最后相同的数据方法调用 放types定义的空数组中 这样就能保证内容不重复
最后优化 将页面中的9个点 进行点击事件 将item放进去 后面跳转需要进行数字对比 才能看到点击谁到谁哪里
我通过query进行的路由传参
当然你也需要在跳转页面那边进行接受一下 在跳转那边页面 create钩子调用函数
一开始是想的上面无绑定的tab里面的name属性 所以用的方法
这样就实现了点击你的9个点的字就跳去相对应的页面tab名字
转载自:https://juejin.cn/post/7141952312523620359