微信小程序实现分类菜单 swiper分类菜单

做项目的时候遇到仿美团上的滚动菜单，需要调用后台数据的，以下是为大家整理的
wxml

	
			
				
					
						
							HOT
						
						
							
						
						
							{{item.name}}
						
					
				
			
			
				
					
				
			
		

js

data:{
	list: [{
        avatar: '自己的图片地址',
        name: '健身',
      },
      {
       avatar: '自己的图片地址',
        name: '餐饮',
      },
      {
         avatar: '自己的图片地址',
        name: '视频',
      },
      {
        avatar: '自己的图片地址',
        name: '旅游',
      },
      {
         avatar: '自己的图片地址',
        name: '出行',
      },
      {
        avatar: '自己的图片地址',
        name: '医疗',
      },
      {
        avatar: '自己的图片地址',
        name: '电影',
      },
      {
        avatar: '自己的图片地址',
        name: '宠物',
      },
      {
       avatar: '自己的图片地址',
        name: '理发',
      },
      {
        avatar: '自己的图片地址',
        name: '理发',
      },
      {
        avatar: '自己的图片地址',
        name: '理发',
      },
      {
       avatar: '自己的图片地址',
        name: '理发','
      },
      {
        avatar: '自己的图片地址',
        name: '理发',
      },
      {
        avatar: '自己的图片地址',
        name: '理发',
      },
    ],
},
// 九宫格
  getrecom() {
    var result = [] //定义一个空数组
    for (var i = 0; i < this.data.list.length; i += 10) {
      result.push(this.data.list.slice(i, i + 10));
    }
    this.setData({
      list: result
    })
    // console.log(this.data.list)
  },
  // 通过下标改变指示点
  swiperChange: function (e) {
    this.setData({
      currentSwiper: e.detail.current
    })
  },

css

.ification {
  width: 100%;
  height: 373rpx;
  background-color: #F7FBFF;
  position: relative;
}
.info{
  width: 143rpx;
  height: 160rpx;
}
.swiper {
  width: 100%;
  height: 338rpx;
  padding: 26rpx 21rpx;
  box-sizing: border-box;

}
.avatar{
  display: flex;
  height: 84rpx;
  justify-content: center;
  align-items: center;
}
.row{
  display: flex;
  justify-content: center;
  align-items: center;
}
.swipers{
  display: flex;
  flex-wrap: wrap;
}
.swiper_item {
  position: relative;
  float: left;
  width: 43rpx;
  height: 5rpx;
  border-radius: 15%;
  background-color: #aaa;

}
.activeel {
  width: 43rpx;
  background-color: #589DFC;
}
.avatar image{
  width: 75rpx;
  height: 75rpx;
}

.swiper-box {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.swiper-box view {
  text-align: center;
}

.jians {
  width: 74rpx;
  height: 30rpx;
  border-radius: 100rpx;
  position: absolute;
  left: 52rpx;
  font-size: 23rpx;
  display: flex;
  justify-content: center;
  background: linear-gradient(to left, #FF5A1C, #FFAB60);

}

.indicator {
  width: 100%;
  height: 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}