小程序轮播滑动实现产品类型左右滑动分页_小程序使用swiper轮播图实现商品滑动跟左侧分类联动-优快云博客

本文链接：https://blog.youkuaiyun.com/chaosama/article/details/103027821

本文介绍了一种使用WXML和JS在小程序中动态加载和展示服务分类的方法，通过请求后端获取服务类别数据，利用swiper组件实现轮播效果，并采用flex布局进行图标与类别名的美观排列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxml

    <view class="service-class">
      <swiper class="swiper-view" indicator-dots="true">
        <block wx:for="{{servicesInfo}}" wx:key="{{servicesInfo}}" data-index="{{index}}">
          <swiper-item style="width:100%">
            <view class="swiper-icon-view">
              <view  wx:for="{{servicesInfo[index]}}" wx:key="{{servicesInfo[index]}}" class="swiper-icon">
                <image src="{{item.image}}"></image>
                <view>{{item.categoryName}}</view>
              </view>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>

data(){
    servicesInfo:[]
}
  getGoodsCategory(){
    let that = this, temporary = [], temporary1 = []
    common.REQUEST(api.INTERFACES.getGoodsCategory,'','get',res=>{
      for(let i=0;i<res.data.length;i++){
        if(i<10){
          temporary.push(res.data[i])
        } else {
          temporary1.push(res.data[i])
        }
      }
      if (temporary1!=''){
        that.data.servicesInfo.push(temporary, temporary1)
      }else{
        that.data.servicesInfo.push(temporary)
      }
      that.setData({
        servicesInfo: that.data.servicesInfo
      })
    })
  },

后端返回数据类型为：
[{ categoryId: 1, categoryName: '家政服务', image: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png' }.{ categoryId: 1, categoryName: '家政服务', image: 'http://img.tiantue.com:8080/images/2019-03-21/0eb27a13ab9d449fb21742a2c5cb94b21553155793305.png' }]

wxss

.service-class{
  background: #ffffff;
  margin-top: 20rpx;
  padding-bottom: 0;
}
.swiper-icon image{
  margin-top:10rpx;
  width: 90rpx;
  height: 90rpx;
}

/*新小图标*/
.swiper-view{
  height: 300rpx;
}
.swiper-icon-view{
  text-align: center;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between; 
}
.swiper-icon{
  width: 20%;
}