🔥系列专栏:微信小程序 🎉欢迎关注👀点赞👍收藏⭐留言📝 🥇个人主页:​​hacker_demo的51CTO博客​​ 💬个人格言:不断的翻越一座又一座的高山,那样的人生才是我想要的。这一马平川,一眼见底的活,我不想要,我的人生,我自己书写,余生很长,请多关照,我的人生,敬请期待💖💖💖

请添加链接描述

(swiper和swiper-item)

实现轮播图效果

在这里插入图片描述

==list.wxml==

<!--轮播图的结构-->
<swiper class="swiper-container">
    <!--第一个轮播图-->
    <swiper-item>
    <view class="item">A</view>
    </swiper-item>
    <!--第二个轮播图-->
    <swiper-item>
        <view class="item">B</view>
    </swiper-item>
    <!--第三个轮播图-->
    <swiper-item>
        <view class="item">C</view>
    </swiper-item>
</swiper>

==list.wxss==

/* 轮播图样式 */
.swiper-container{
    height: 150px;
}

.item{
    height: 100%;
    line-height: 150px;
    text-align: center;
}

swiper-item:nth-child(1) .item{
    background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
    background-color: lightskyblue;
}
swiper-item:nth-child(3) .item{
    background-color: lightpink;
}

swiper组件的常用属性

属性 类型 默认值 说明
indicator-dots boolean false 是否显示面板提示点
indictor-color color rgba(0,0,0,3) 指示点颜色
indictor-active-color color #000000 当前选择的指示点颜色
autoplay boolean false 是否自动切换
interval number 5000 自动切换时间间隔
circular boolean false 是否采用衔接滑动

✅显示指示点颜色

在这里插入图片描述

✅设置指示点颜色

在这里插入图片描述 ✅设置当前选择的指示点颜色

在这里插入图片描述 ✅设置1秒自动切换

在这里插入图片描述

✅设置衔接滑动

在这里插入图片描述

结束语🥇

以上就是微信小程序之swiper和swiper-item组件的基本使用,创作不易多多支持👍👍👍 你们的支持就是hacker创作的动力💖💖💖

hacker707 (900 × 383, 毫米) (600 × 400, 毫米) (300 × 400, 毫米) (400 × 400, 毫米) (500 × 400, 毫米) (900 × 400, 毫米) (900 × 500, 毫米) (900 × 400, 毫米) (4).gif