likes
comments
collection
share

换一批能刷新和点击事件跳指定页面路径

作者站长头像
站长
· 阅读数 45

换一批能刷新和点击事件跳指定页面路径

静态布局 设计图是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
评论
请登录