上次小程序（4）

最新推荐文章于 2024-10-02 15:19:42 发布

万雅过往

最新推荐文章于 2024-10-02 15:19:42 发布

阅读量84

点赞数

分类专栏：磨刀不误平实文章标签：小程序

本文链接：https://blog.csdn.net/qq_52183449/article/details/120924447

版权

磨刀不误同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

平实

11 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用微信小程序中的Swiper组件创建多列自动循环滚动的效果，包括水平和垂直方向的展示，并展示了相应的WXML和WXSS代码。通过修改display属性为flex，实现了内容填充整个视图的需求。

摘要由CSDN通过智能技术生成

这次是关于滚动的部分 swiper 块

WXML：

在使用的时候想用一个view盒子做一个剪影盒子，但是发现一直填不满空隙，发现是通过修改display：flex可以让他们横向补充填满

<!--pages/swiper/swiper.wxml-->
<view class="view">
    <swiper indicator-dots indicator-active-color="white" class="itemswiper1"
    autoplay  
    interval="2200" 
    circular
>
    <swiper-item>
        <image src="/pictures/阿狸灵魂.jpg" mode="widthFix" class="item2"></image>
    </swiper-item>
    <swiper-item class="item">
        <image src="/pictures/kda阿狸.jpg" mode="left" class="item2"></image>
    </swiper-item>
    <swiper-item class="item">
        <image src="/pictures/卡莎.png" mode="aspectFill" class="item2"></image>
    </swiper-item>
</swiper>
<swiper indicator-dots indicator-active-color="white" class="itemswiper"
    autoplay  
    interval="2200" 
    circular
    vertical
>
    <swiper-item>
        <image src="/pictures/阿狸灵魂.jpg" mode="aspectFill" class="item"></image>
    </swiper-item>
    <swiper-item class="item">
        <image src="/pictures/kda阿狸.jpg" mode="aspectFill" class="item"></image>
    </swiper-item>
    <swiper-item class="item">
        <image src="/pictures/卡莎.png" mode="aspectFill" class="item1"></image>
    </swiper-item>
</swiper>
<!-- autoplay 自动播放 -->
<!-- interval 播放间隔（ms） -->
<!-- circular 循环播放 -->
<!-- indicator-dots 下面播放列的白点 -->
<!-- indicator-activer-color 当前页-dot的颜色 -->
<!-- vertical 竖向播放 -->
</view>
<swiper indicator-dots indicator-active-color="white" class="itemswiper"
    autoplay  
    interval="2200" 
    circular
>
    <swiper-item>
        <image src="/pictures/阿狸灵魂.jpg" mode="aspectFill" class="item"></image>
    </swiper-item>
    <swiper-item class="item">
        <image src="/pictures/kda阿狸.jpg" mode="aspectFill" class="item"></image>
    </swiper-item>
    <swiper-item class="item">
        <image src="/pictures/卡莎.png" mode="aspectFill" class="item1"></image>
    </swiper-item>
</swiper>

WXSS:

/* pages/swiper/swiper.wxss */

.item{
    width: 100%;height: 600rpx;
}
.item1{
    width:100%;height: 100%;
    text-align: center;
}
.item2{
    width: 100%;height: 400rpx;
}
.itemswiper{width: 100%;height: 240px;
}
.itemswiper1{width: 350rpx;height: 120px;
    text-align:start;
}
.view{width: 750rpx;height: 120px;
    display:flex
}

进度：