微信小程序swiper組件小圓點樣式更改

2020年7月17日更新一下,
今天發(fā)現(xiàn)這個方法要改一下。
把類選擇器.swiper 改成標(biāo)簽選擇器swiper就好了。
下面的代碼也改過來了


可以直接打開官方組件的示例代碼,在index.wxss中增加以下這段就搞明白了。
可以直接點擊官方示例代碼鏈接去嘗試,前提是你已經(jīng)安裝了微信開發(fā)者工具。
點這里:

微信截圖_20190110145753.png

/* 設(shè)置點點的層級 ,可以調(diào)整小點的位置*/
swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
  position: absolute;
  top: 250rpx;
  /* left: 500rpx; */
  /* z-index可設(shè)可不設(shè)*/
  z-index: 999;
}
 
/* 設(shè)置點點的樣式 */
swiper .wx-swiper-dot {
  width: 35rpx;
  height: 7rpx;
  display: inline-flex;
  /* 這里設(shè)置點點之間的距離 */
  margin-left: 19rpx;
  justify-content: space-between;
}
 
 /* 當(dāng)前點點的樣式 */
swiper .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: #ffffff;
}
 
/* 當(dāng)前點點的樣式 */
swiper .wx-swiper-dot-active::before {
  background: #ff0000;
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容