想獲取swiper套件中的translate3d數值

6月7日 18:15
大家好,自己研究半天只能讀取一開始我對這個div設定的style,所以上來尋求協助 以下如果有需要提供的更詳細的再麻煩各位,謝謝 ----我一開始在html對swiper區段的設定---- <swiper id="momo" style="transform: translate3d(0%, 0px, 0px); width: 100%; height: 20%; position: absolute; bottom:0%; "> ----------------------------------- 而這一句在網頁中會因為我有所滑動而在數值上有變化,如下圖變成translate3d(1.59px, 0px, 0px)
但我在TS中寫的功能讀不了套件裡面的內容: (momo是這個div的id) -—————我希望滑鼠在裡面變動的時候可以回傳style中translated的X座標---———— $('#momo').mousemove(function(){ var slideTransform = $('#momo').attr('style').split(';'); slideTransform = $.map(slideTransform, function(style){ style = style.trim(); if (style.startsWith('transform: translate3d')) { var reg:RegExp = /transform: translate3d\((.+)%,(.+)px,(.+)px\)/ let match:any = reg.exec(style) alert(match[1]) } }); }); 而我對這個的期待是他會alert出目前swiper的X座標,但不管怎麼滑動,都只能讀取到我一開始設定給momo這個div的translated的0,如下圖
-----------------------------------
這整個div已經變我往右移動了208.8px
但座標還是回傳0
我覺得是因為我是用swiper來做div,所以我改不到,但不知道要如何去抓取在網頁上變動的這個值,因為他是swiper內建的(下面這段)
0
回應 6
文章資訊
共 6 則留言
國立高雄科技大學
要用Angular的方式去取值吧!
B1 請問是說用ng-reflect-ng-class去取他的style嗎🥺
國立高雄科技大學
B2 不知道你有沒有試過它提供的一些 event listener
B3 我後來試過swiper.getTranslate()跟swiper.translate 有一個網站上實做出來的範例跟我想要的一模一樣,
下面是我在html中對swiper的設定跟名字
因為想要測試,所以我每次滑動都想要看一次,但出來都是undefined跟ERROR (他說找不到function,但在swiper的官網上,沒有編註angular swiper不能用😢)
不知道是不是參考JS寫angular的過程錯了,如果您有經驗再麻煩你幫我看看
國立臺灣科技大學
onSlideChange(swiper) { alert(swiper.getTranslate()) } 試試看?
B5 相間恨晚~~~ 我昨天突然想到用$event加,但不知道是不是swiper angular真的不支援getTranslate(),我後來是用console.log(swiper)慢慢一層一層加參數有成功了!謝謝