需求要做可橫向滑動的多個標(biāo)簽選項,具體實現(xiàn)效果如圖:

為了實現(xiàn)這個效果,我前后寫了兩種布局代碼.發(fā)出來給大家比較一下.

代碼一:

WXML:

WXSS:

這種方法寫出來,在低于iOS10.0版本以下系統(tǒng)會出現(xiàn)不可以滑動的問題.并且并未找到解決方案..苦思許久,還是換種寫法算了.下面是寫法二:

代碼二:

WXML:

WXSS:

兩種寫法的區(qū)別在于:在代碼一中,scroll-view中先創(chuàng)建一個view,并且使用flex布局,再在這個view中根據(jù)標(biāo)簽循環(huán)創(chuàng)建view.代碼二,直接在scroll-view中循環(huán)創(chuàng)建view,但是scroll-view要添加white-space:nowarp,創(chuàng)建的view必須為display:inline-block.

因為代碼一的寫法會引起部分機(jī)型顯示錯誤.所以我還是先選擇第二種寫法.也就是說,在設(shè)置scoll-view橫向滑動時,要在scroll-view的css中添加white-space:nowrap,還要在scroll-view中創(chuàng)建的view的css中添加display:inline-block.這樣就可以啦.具體代碼如上,大家可參考.

代碼一中的問題,希望可以有大神看到幫助解答.謝謝啦.