小程序轮播图效果
今天我来说一下超级简单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: 500rpx;
}
swiper image{
width: 100%;
height: 100%;
}
.post-cont{
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-bottom: 40rpx;
background: #fff;
border-bottom: 1px solid #ededed;
border-top:1px solid #ededed;
padding-bottom: 5px;
}
效果图
是不是很简单呢？出来可能出问题，是我没有image文件夹，你只需要把自己的本地建一个就好了。是不是很简单呢
自己动手写一个吧