微信小程序菜单栏分页操作

问题：实现菜单栏目的分页，可以通过滑动来看下一页的菜单栏目。

方案：

1.使用swiper来做分页，每一页放10个图标。
2.对后台返回的数据进行分组
菜单节点

 <swiper bindchange="swiperChange"><swiper-item wx:for='{{menu}}' wx:key='index' class='icon_swiper_item'><navigator url=" " class='icon_box' wx:for="{{item}}" wx:key="index"> <image src='{{item.img}}' class='icon_img'/><text>{{item.name}}</text></navigator></swiper-item> </swiper>

菜单样式

.icon_swiper_item {display: flex;flex-wrap: wrap;
}
.icon_box {width: 20%;text-align: center;font-size: 24rpx;color: #666;padding: 10rpx 0;
}
.icon_img {width: 80rpx;height: 80rpx;border-radius: 8rpx;margin: auto;display: block;padding-bottom: 10rpx;
}

分组

list: [{id: 274, name: "美食", icon: "/20200814/102608_2400.jpg"},{id: 278, name: "休闲", icon: "/20200814/102658_6659.jpg"},{id: 279, name: "酒店", icon: "/20200814/144728_2542.jpg"},{id: 280, name: "丽人", icon: "/20200814/144747_1050.jpg"},{id: 281, name: "生活", icon: "/20200814/144822_5159.jpg"},{id: 276, name: "外卖", icon: "/20200814/102735_4808.jpg"},{id: 282, name: "果蔬", icon: "/20200814/144601_2809.jpg"},{id: 283, name: "美酒", icon: "/20200814/144910_7476.jpg"},{id: 284, name: "零食", icon: "/20200814/144933_9356.jpg"},{id: 285, name: "百货", icon: "/20200814/145004_2528.jpg"},
]

根据数组的索引进行分组，每组放10个

let menu = [];
for (let i in list)  {let index = parseInt(i/10);if (!menu[index]) menu[index] = [];menu[index].push(list[i]);
};

或是通过Math取整

 let index = Math.floor(i/10);

微信小程序菜单栏分页操作相关推荐

微信小程序云函数操作云数据库Mysql
微信小程序云函数操作云数据库Mysql 参考一参考二云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写.一键上传部署即可运行后端代码. 小程序内提供了专门用于云函数调用的 API.开发 ...
微信小程序显示分页列表
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序操作mysql_微信小程序：数据库操作
原标题:微信小程序:数据库操作一.前提条件: 登录开发者工具软件,配置数据库数据集,操作如下: 打开云开发控制台添加集合User 二.定义函数: //增加新纪录到云数据库 onAdd: funct ...
PHP数组操作程序,微信小程序学习数组操作
前言相信在小程序推出公测之后,很多小伙伴都已经抓紧申请注册小程序了.在开发阶段中也碰到了很多的问题,例如wx.request数据请求不成功,在数组操作时,不知道如何往数组里push数据,input如 ...
使用微信小程序云空间操作云数据库
使用微信小程序云空间操作云数据库在微信开发工具中有个云空间,想必大家在开发的过程中应该都已经看见了. 一番下一步下一步操作后我们就能够使用这个云空间了,这个时候就可以根据基础的控制面板进行功能上的选 ...
微信小程序清空input操作，为啥要点2次才能清空？
微信小程序清空input操作,为啥要点2次才能清空? 点第一次失去焦点,点第二次input才被清空直接贴代码 <view class='searchCon'> <input typ ...
记一次微信小程序云函数操作Mysql数据库
一.前因在制作课程设计的时候需简单地操作Mysql数据库使得小程序可以与其他端系统进行数据交互这时候问题来了,仅仅只是因为一个插入表的数据库操作就单独制作一个Servlet看似又有点浪费服务器资源 ...
微信小程序云开发操作全解
云开发三大基础能力云函数:运行在微信服务器上的函数,处理微信相关操作有天然优势,如获得用户信息异常方便(以前服务端解析很麻烦) 数据库:一个小程序可以直接操作的JSON数据库,可以直接操作数据库,不 ...
微信小程序之Array操作、图片上传
一.Array操作 1,渲染 Array 对象数组多用于列表渲染,对于列表中的数据,能够进行十分便捷有效的存储. .wxml<view class='clazz-item' bindtap='s ...

微信小程序菜单栏分页操作

问题：实现菜单栏目的分页，可以通过滑动来看下一页的菜单栏目。

方案：

微信小程序菜单栏分页操作相关推荐

最新文章

热门文章