效果图:
实现代码:
wxml
<view class="card card_b">
<swiper autoplay="{{true}}" interval="4000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper" circular="{{true}}">
<block wx:for="{{imgUrls}}" wx:key="unique">
<swiper-item>
<view catchtap="click_swiper" id="{{index}}">
<image src="{{item}}" class="img"></image>
</view>
</swiper-item>
</block>
</swiper>
<view class="s_b">
<block wx:for="{{imgUrls}}" wx:key="unique">
<view class="dot {{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>
</view>
js
Page({
data: {
// 轮播
swiperCurrent: 0,
imgUrls: [
'/images/banner1.jpg',
'/images/banner2.jpg',
'/images/banner3.jpg',
'/images/banner4.jpg'
],
},
// 轮播
swiperChange: function(e) {
this.setData({
index: e.detail.current,
swiperCurrent: e.detail.current
})
},
onLoad: function (options) {
},
})
css
.card {
background: white;
border-radius: 15rpx;
margin-bottom: 30rpx;
width: 94%;
margin-left: 3%;
}
.card_b {
min-width: 80%;
min-height: 200rpx;
position: fixed;
bottom: 20rpx;
background: #efeff3;
}
swiper {
height: 200rpx;
border-radius: 15rpx;
}
swiper-item {
/* position: relative; */
border-radius: 15rpx;
}
swiper-item .img {
height: 200rpx;
width: 100%;
border-radius: 15rpx;
}
.s_b {
position: fixed;
bottom: 66rpx;
right: 36rpx;
display: flex;
justify-content: center;
}
.dot {
height: 2px;
width: 22rpx;
background: white;
margin-right: 6rpx;
}
.active {
background: red;
}
到这就完成了,下面是把它封装成自定义组件的代码和引用方式。
自定义组件轮播图的实现
在项目跟目录创建 components 文件夹,里面创建 swiper 自定义组件:
swiper.js
Component({
properties: {
// 这里定义了innerText属性,属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 轮播
swiperCurrent: 0,
imgUrls: [
'/images/banner1.jpg',
'/images/banner2.jpg',
'/images/banner3.jpg',
'/images/banner4.jpg'
],
},
methods: {
// 这里是一个自定义方法
// 轮播
swiperChange: function (e) {
this.setData({
index: e.detail.current,
swiperCurrent: e.detail.current
})
},
}
})
swiper.json
{
"component": true
}
swiper.wxml
<view class="card card_b">
<swiper autoplay="{{true}}" interval="4000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper" circular="{{true}}">
<block wx:for="{{imgUrls}}" wx:key="unique">
<swiper-item>
<image src="{{item}}" class="img"></image>
<view class="s_b">
<block wx:for="{{imgUrls}}" wx:key="unique">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>
</swiper-item>
</block>
</swiper>
</view>
swiper.wxss
.card {
background: white;
border-radius: 15rpx;
margin-bottom: 30rpx;
width: 94%;
margin-left: 3%;
}
.card_b {
min-width: 80%;
min-height: 200rpx;
position: absolute;
bottom: 20rpx;
background: blue;
}
swiper{
height: 200rpx;
}
swiper-item {
position: relative;
}
swiper-item .img{
height: 200rpx;
border-radius: 15rpx;
}
.s_b {
position: absolute;
bottom: 26rpx;
right: 26rpx;
display: flex;
justify-content: center;
}
.dot {
height: 2px;
width: 22rpx;
background: white;
margin-right: 6rpx;
}
.active{
background: red;
}
引用该自定义组件:
在引用的页面的json配置文件中添加:
{
"usingComponents": {
"my_swiper": "../../components/swiper/swiper"
}
}
在引用的页面的wxml文件中添加:
<my_swiper />
完成