修改指示点
修改轮播样式
1、自定义指示点
<view class="singlegraph">
<swiper
class="swiper"
indicator-active-color="#ffffff"
current="{{current}}"
bindchange="swiperchange"
>
<swiper-item class="swiper-item" wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="index">
<image src="{{item}}"></image>
</swiper-item>
</swiper>
<view class="dots">
<view class="dot{{index == current ? ' active' : ''}}"></view>
</view>
</view>
js
swiperchange(e) {
this.setData({
current: e.detail.current
})
}
css
.singlegraph {
position: relative;
width: 100%;
height: 420rpx;
line-height: 0;
display: flex;
justify-content: center;
align-items: center
}
.dots{
position: absolute;
left: 0;
right: 0;
bottom: 40rpx;
display: flex;
justify-content: center;
}
.dots .dot{
margin: 0 8rpx;
width: 14rpx;
height: 14rpx;
background:rgba(255,255,255,1);
border-radius: 8rpx;
opacity: .5;
transition: all .6s;
}
.dots .dot.active{
opacity: 1;
}
效果
美化修改轮播样式
<view class="demo">
<swiper
previous-margin="180rpx"
next-margin="180rpx"
circular="true"
current="{{current}}"
bindchange="swiperchange"
>
<swiper-item
wx:for="{{demolist}}" wx:key="index"
>
<view class="dot{{index == current ? ' active' : ''}}" style="background: {{item.color}}">
<view class="title txtone">{{item.title}}</view>
<view class="subtitle txtone">{{item.subtitle}}</view>
<view class="img">
<image></image>
</view>
<view class="btnTxt">立即查看<view class="order-more iconfont"></view></view>
<view class="btn" style="background: {{item.color}}"></view>
</view>
</swiper-item>
</swiper>
</view>
js
// components/diy-display-ad/diy-display-ad.js
Component({
/**
* 组件的属性列表
*/
properties: {
demolist: {
type: Array,
value: []
}
},
/**
* 组件的初始数据
*/
data: {
current: 0
},
/**
* 组件的方法列表
*/
methods: {
swiperchange(e) {
this.setData({
current: e.detail.current
})
}
}
})
css
.demo{
background: #fff;
padding: 40rpx 0;
}
.demo swiper{
height: 480rpx;
}
.demo swiper-item{
position: relative;
}
.demo .dot{
width: 380rpx;
height: 480rpx;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-radius:10rpx;
transition: .5s;
padding: 25rpx 30rpx 0;
color: #fff;
box-sizing: border-box;
overflow: hidden;
-webkit-transform:scale(.9,.9);
}
.demo .dot.active{
width: 380rpx;
height: 480rpx;
box-sizing: border-box;
-webkit-transform:scale(1,1);
}
.txtone{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.demo .dot .title{
font-size: 36rpx;
font-weight:700;
text-align: center;
line-height:43rpx;
color: #fff
}
.demo .dot .subtitle{
font-size: 20rpx;
text-align: center;
margin: 13rpx 0 15rpx;
color: #fff
}
.demo .dot .img{
width: 100%;
height: 300rpx;
background: #898989;
border-radius: 10rpx;
border: 5rpx solid #fff
}
.demo .dot .btn{
position: absolute;
left: calc(50% - 1000rpx);
bottom: -1924rpx;
width: 2000rpx;
height: 2000rpx;
background: red;
border-radius: 50%;
border: 5rpx solid #fff;
transition: .5s;
z-index: 1
}
.demo .dot .btnTxt{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
bottom: 20rpx;
right: 0;
left: 0;
line-height: 40rpx;
margin: auto;
text-align: center;
font-size: 28rpx;
color: #fff;
z-index: 99
}
.demo .dot .btnTxt .iconfont{
position: relative;
width: 13rpx;
height: 13rpx;
font-size: 26rpx;
margin-left: 10rpx;
}
.demo .dot .btnTxt .iconfont::after, .demo .dot .btnTxt .iconfont::before{
display: block;
content: "";
position: absolute;
width: 15rpx;
height: 2rpx;
background: #fff
}
.demo .dot .btnTxt .iconfont::after{
transform:rotate(45deg);
top: 0;
}
.demo .dot .btnTxt .iconfont::before{
transform:rotate(-45deg);
bottom: 0;
}
效果
