微信小程式 自定義swiper指示點樣式

2021-09-26 14:36:00 字數 655 閱讀 3131

廢話少說,上**!

比如你有乙個輪播圖元件,wxml檔案裡**如下:

...   

... 一些你的**

...

怎麼設定輪播圖指示點樣式呢?別急,往下看:

在對應的wxss檔案裡,加上:

/* 預設指示點的樣式 */

.swiper .wx-swiper-dot

/* 選中指示點的樣式 */

.swiper .wx-swiper-dot.wx-swiper-dot-active

其中 .swiper為對應wxml檔案裡的樣式名,剩餘的.wx-swiper-dot為預設的其他指示點的樣式,.wx-swiper-dot.wx-swiper-dot-active為當前選中的指示點的樣式。裡面的**自定義來實現你想要的的樣式。

目前存在的問題?暫未找到解決辦法:

如果把swiper放在自定義元件裡的話,這樣設定的樣式,不起作用,不知道如何解決。

但是,上面那個問題,我另尋蹊徑了。那就是通過自定義元件的,把swiper還是寫在page的wxml裡,這樣樣式就起作用了。

微信小程式之swiper元件 自定義指示器樣式

1.首先,需要在自定義的swiper元件外用乙個父標籤將該元件包裹起來,並賦予其類名。components homebanner homebanner.wxml swiper autoplay interval duration circular 1111 swiper item 2222 swip...

微信小程式自定義元件

父元素 子元件 可以由多個 子元件 a,b,c,d 父元素 首先是關於元件的建立 1 單獨建立乙個資料夾存放 wxss x.js wxml json這四個檔案,其中主要對元件進行宣告的是json檔案,需要寫入 這段 就是讓元件允許被使用,如果元件需要呼叫另乙個元件中,那麼就需要再usingcompe...

微信小程式自定義元件

根據專案需要,抽離出公共的元件。1 在專案根目錄新建乙個component的資料夾,然後新建自己需要的檔案 專案目錄如下 在component裡面我新建了3個子元件。2 子元件的寫法 只有js檔案格式不一樣,其他的檔案都正常寫。js需要自定義乙個component,參考 示例 component d...