renderings
Detailed Data Explanation of WeChat Mini Programs
indicator-dots: Whether to display panel indicator dots [default false]
indicator-color: indicator point color [default rgba(0, 0, 0, .3)]
indicator-active-color: The color of the currently selected indicator point [default #000000]
autoplay: whether to switch automatically [default false]
interval: automatic switching interval [default 5000]
duration: sliding animation duration [default 500]
circular: Whether to use connecting sliding [default false]
vertical: whether the sliding direction is vertical [default false]
The source code is as follows
index.wxml
<view class="index-container">
<view class="index-header">
<van-search value="{
{ searchInfo }}" shape="round" background="#9c7bf0" placeholder="请输入搜索内容" />
<view class="index-swiper">
<swiper class="myswiper" indicator-dots="true" indicator-color="#fff" indicator-active-color="#9c7bf0" autoplay="true" interval="5000" duration="500" circular="true">
<swiper-item>
<image class="swiper-img" mode="heightFix" src="../../images/swiper/shop1.png"></image>
</swiper-item>
<swiper-item>
<image class="swiper-img" mode="heightFix" src="../../images/swiper/shop2.png"></image>
</swiper-item>
</swiper>
</view>
</view>
</view>index.wxss
.index-header {
background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));
width: 100%;
height: 190px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
}
.index-swiper{
padding: 10px;
}
.swiper-img {
height: 140px;
}