1. 首頁 > 生活百科 > >

百度小程序 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自行添加 });【百度小程序 swiper 輪播圖自定義組件】分享到此為止，有什么問題，可以留言！

    推薦閱讀