利用小程序swiper组件结合flex布局实现轮播

最新推荐文章于 2024-03-02 11:12:33 发布

星Y

最新推荐文章于 2024-03-02 11:12:33 发布

阅读量3.6k

点赞数 4

本文链接：https://blog.csdn.net/HIRAETHZY/article/details/105860837

版权

利用swiper组件结合flex布局实现如下图排版在这里插入图片描述
1.首先在小程序中创建一个空目录，然后在index.wxml中添加以下代码：

<!--index.wxml-->
<swiper class="contentSlide" indicator-color="rgba(0,0,0,0.3)" indicator-active-color="#625f5f" indicator-dots circular autoplay>
  <swiper-item class="list">
    <view class="listItem">
      <image src="/images/1.png" />
      <view>美食</view>
    </view>
    <view class="listItem">
      <image src="/images/2.png" />
      <view>超市便利</view>
    </view>
    <view class="listItem">
      <image src="/images/3.png" />
      <view>生鲜果蔬</view>
    </view>
    <view class="listItem">
      <image src="/images/4.png" />
      <view>美团专送</view>
    </view>
    <view class="listItem">
      <image src="/images/5.png" />
      <view>跑腿代购</view>
    </view>
    <view class="listItem">
      <image src="/images/6.png" />
      <view>晚餐优选</view>
    </view>
    <view class="listItem">
      <image src="/images/7.png" />
      <view>甜点饮品</view>
    </view>
    <view class="listItem">
      <image src="/images/8.png" />
      <view>家常菜</view>
    </view>
    <view class="listItem">
      <image src="/images/9.png" />
      <view>减免配送费</view>
    </view>
    <view class="listItem">
      <image src="/images/10.png" />
      <view>品牌连锁</view>
    </view>
  </swiper-item>
  <swiper-item class="list">
    <view class="listItem">
      <image src="/images/10.png" />
      <view>品牌连锁</view>
    </view>
    <view class="listItem">
      <image src="/images/9.png" />
      <view>减免配送费</view>
    </view>
    <view class="listItem">
      <image src="/images/8.png" />
      <view>家常菜</view>
    </view>
    <view class="listItem">
      <image src="/images/7.png" />
      <view>甜点饮品</view>
    </view>
    <view class="listItem">
      <image src="/images/6.png" />
      <view>晚餐优选</view>
    </view>
    <view class="listItem">
      <image src="/images/5.png" />
      <view>跑腿代购</view>
    </view>
    <view class="listItem">
      <image src="/images/4.png" />
      <view>美团专送</view>
    </view>
    <view class="listItem">
      <image src="/images/3.png" />
      <view>生鲜果蔬</view>
    </view>
    <view class="listItem">
      <image src="/images/2.png" />
      <view>超市便利</view>
    </view>
    <view class="listItem">
      <image src="/images/1.png" />
      <view>美食</view>
    </view>
  </swiper-item>
</swiper>

2.在index.wxss中利用flex布局实现排版

/**index.wxss**/
.contentSlide {
  font-size: 9pt;
  height: 450rpx;
}
.contentSlide image {
  width: 65px;
  height: 65px;
  margin: 0 8rpx;
}
.list {
  display: flex;
  flex-wrap: wrap;/*规定灵活的项目在必要的时候拆行或拆列。 */
}
.listItem {
  flex: 1;
}
.listItem>view {
  width: 65px;
  text-align: center;
  margin: 8rpx auto;
}

简单的小程序静态页面完成