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

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

方案：

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);