小程序自定义轮播图样式
小程序自定义轮播图样式以下是各案例,仅供大家参考。效果展示:index.wxml代码:
{{item.ad_name}}
index.js代码:constapp=getApp()
Page({
data:{
now:'',
banner:[],
circular:true,
indicatorDots:false,
autoplay:true,
interval:4000,
duration:800,
swiperCurrent:0,
},
swiperChange(e){
letcurrent=e.detail.current;
//console.log(current,'轮播图')
letthat=this;
that.setData({
swiperCurrent:current,
})
},
//事件处理函数
bindViewTap:function(){
},
onLoad:function(){
this.getBanner();//获取轮播图
},
//轮播
getBanner:function(){
varthat=this
wx.request({
url:app.AppUrl+'/getBanner',
success(res){
that.setData({
banner:res.data.res_banner,
})
}
})
},
})index.wxss代码:.lunbo{width:96%;margin-left:2%;height:350rpx;background:#000;float:left;border-radius:15rpx;overflow:hidden;position:relative;}
.lunboswiper{width:100%;height:350rpx;}
.lunboimage{width:100%;height:350rpx;display:block;border-radius:15rpx;}
.lunbo.name{background:linear-gradient(transparent,rgba(0,0,0,.1)20%,rgba(0,0,0,.2)35%,rgba(0,0,0,.3)65%,rgba(0,0,0,.4));
width:750rpx;
position:absolute;
bottom:-2rpx;
left:0px;}
.lunbo.nameview{
width:500rpx;
color:#fff;
padding-left:20rpx;
padding-bottom:10rpx;
padding-top:10rpx;
font-size:30rpx;
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
-webkit-line-clamp:1;
}
.dots{
position:absolute;
right:0;
bottom:20rpx;
display:flex;
}
.dots.dot{
margin:08rpx;
width:8rpx;
height:8rpx;
background:rgba(255,255,255,0.5);
border-radius:8rpx;
transition:all.6s;
}
.dots.dot.active{
width:24rpx;
background:#fff;
}