百度小程序 swiper 轮播图自定义组件 _百度小程序

百度小程序内部只允许使用 swiper-item 组件描述滑块内容，否则会导致未定义的行为，默认 swiper组件的指示点默认是圆的，丑的一逼，本人实在无法直视，只能通过自定义组件属性来修改样式，废话不多说，直接上dome ，效果自行查看本站小程序。
【百度小程序 swiper 轮播图自定义组件】

文章插图
为什么我不使用百度提供的轮播图组件，那是因不好管理，还影响加载，本来首页调用接口就需要 2-3 次了，还要在加载一次百度小程序的轮播图组件，想想都犯愁。
参考文档：https://smartprogram.baidu.com/docs/develop/component/view_swiper/
index.swan index.css/*swiper
就算你样式写的再好，你也一样不会拥有你想要的
*/
/*轮播图*/
.slide-image{
width:100%;
}
/*圆点样式控制*/
.swiper-box{
position:relative;
width:100%;
}
.dots{
position:absolute;
left:0;
right:0;
bottom:0;
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-webkit-justify-content:center;
-moz-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
padding:10rpx0;
background:rgba(0,0,0,.2)
}
.dots.dot{
margin:08rpx;
width:14rpx;
height:14rpx;
background:rgba(255,255,255,.8);
border-radius:8rpx;
-webkit-transition:all.6s;
transition:all.6s;
}
.dots.dot.active{
width:40rpx;
background:#338ff0;
}
/*圆点样式控制*/index.js//index.js
//获取应用实例
constapp=getApp(); Page({
data:{
swiper:[{
\"route\":null,
\"img\":\"\"
}],
swiperCurrent:\"\",
//轮播图圆点
swiperH:\"\"
//这是swiper框要动态设置的高度属性
}, swiperChange:function(e){
this.setData({
swiperCurrent:e.detail.current//获取当前轮播图片的下标
})
},
imgHeight:function(e){
varwinWid=swan.getSystemInfoSync().screenWidth;
varimgh=e.detail.height;//图片高度
varimgw=e.detail.width;//图片宽度
varswiperH=winWid*imgh/imgw+\"px\";
//等比设置swiper的高度。即屏幕宽度/swiper高度=图片宽度/图片高度==》swiper高度=屏幕宽度*图片高度/图片宽度
this.setData({
swiperH:swiperH//设置高度
});
}, //加载首页数据
//通过GET自行添加 });分享到此为止，有什么问题，可以留言！

特别声明：本站内容均来自网友提供或互联网，仅供参考，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。