百度小程序内部只允许使用 swiper-item 组件描述滑块内容，否则会导致未定义的行为，默认 swiper组件 的指示点默认是圆的，丑的一逼，本人实在无法直视，只能通过自定义组件属性来修改样式，废话不多说，直接上dome，效果自行查看本站小程序 。
文章插图
为什么我不使用百度提供的轮播图组件，那是因不好管理，还影响加载，本来首页调用接口就需要 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自行添加 });【百度小程序 swiper 轮播图自定义组件】分享到此为止，有什么问题，可以留言！
推荐阅读
- 小程序对 iPhoneX 以上型号判断样式
- 百度智能小程序评级提升优化方法
- 贴心的小棉袄，懂得孝顺父母的星座
- 镐镐铄铄怎么读 铄怎么读
- 醋葫芦小说白话文全文 醋葫芦
- 女人做梦梦见三个小孩死了
- 都市流氓将军 流氓将军
- 实力装逼小哥！今天就要曝光这些星座！
- 梦见自己当小三被抓
- 玉芷颜玉玲珑小说 玲珑小说