小程序轮播图效果

今天我来说一下超级简单de小程序轮播图最初级的实现

先看代码

wxml

< view >

< swiper indicator-dots= "true" autoplay= "true" indicator-active-color= "#fff">

< swiper-item >

< image src= '/images/1.jpg'></ image >

</ swiper-item >

< swiper-item >

< image src= "/images/2.jpg"></ image >

</ swiper-item >

< swiper-item >

< image src= "/images/3.jpg"></ image >

</ swiper-item >

</ swiper >

</ view >

wxss

page{

background: #eeecec;

}

swiper{

width: 100%;

height: 500 rpx;

}

swiper image{

width: 100%;

height: 100%;

}

.post-cont{

display: flex;

flex-direction: column;

margin-top: 20 rpx;

margin-bottom: 40 rpx;

background: #fff;

border-bottom: 1px solid #ededed;

border-top: 1px solid #ededed;

padding-bottom: 5px;

}

效果图

是不是很简单呢？出来可能出问题，是我没有image文件夹，你只需要把自己的本地建一个就好了。是不是很简单呢

自己动手写一个吧