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

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

<view class="ification">
<swiper class="swiper" bindchange="swiperChange">
<swiper-item class="swipers" wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key='index'>
<view class="info" wx:for="{{item}}" wx:for-item="item" wx:for-index="i" catchtap="retus" wx:key='index'>
<view class="jians">
<text>HOT</text>
</view>
<view class="avatar">
<image src="{{item.avatar}}"></image>
</view>
<view class='row'>
<view class="title">{{item.name}}</view>
</view>
</view>
</swiper-item>
</swiper>
<view class="indicator">
<block wx:for="{{list}}" wx:key='index'>
<view class="swiper_item {{index == currentSwiper ? ' activeel' : ''}}"></view>
</block>
</view>
</view>

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