有个给客户做的 在程序首页放的滑动组件 其实就是一个单独的官方swiper

之前传统的都是一屏滑动一整个大的海报 客户滑动一次 只看到一张单独的海报 这次甲方给提的是 一屏滑动里 希望展示2个或者多个商品 作为首页一个主推栏目展示 在线上查了些资料 效果是实现了 不知道是不是最优解 先记录一下 防止之后忘记了找不到 呈现出的效果大概是下面视频这样

代码用的是官方swiper组件代码 样式文件自己修改了下 按照UI的整体风格

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html[这个是swiper组件官方文档的域名]

js的文件里 向服务器获取到数据之后 单独写了一个方法 处理需要展示的数据 贴一下方法的代码

//热销商品数据数组处理_hotSalesGoodsArrEdit(arr, len) { if (len <= 1 || arr.length < len) return arr; var goodsList = [], loop = Math.ceil(arr.length / len); for (var i = 0; i < loop; i++) goodsList.push(arr.slice(len * i, len * (i + 1))); return goodsList;}

arr是服务端返回的商品数据 len是处理完后 需要一屏展示的商品数量 前端wxml里 展示的商品view 样式需要自己改动下

我是直接给了个45%-48%的百分比 给到外层包裹image组件的view image的图片设置了mode="widthFix" 确保商品图片在view里可以填满显示

最后最外层的box 设置了display:flex和justify-content:space-between 保证图片靠屏幕最左和最右显示 具体情况得看自己的程序相应处调整下

最近准备再深度了解下 看看有没有更好的实现方法 可能skyline或者其他第三方组件库里有更厉害的 如果学会了晚点又来记录上

等了蛮久的 Nobody2 有资源了~隔了几年 又可以快乐起来了 😃

保持好奇 不断进步 下期见~