小程式橫向滾動tab

2021-08-14 18:17:08 字數 1003 閱讀 3529

效果圖：

要點介紹：

1，scroll-view 設定為橫向滑動scroll-x=」true」

scroll-x="true"


class="ip_tab_comtainer">


class="ip_tab_comtainer_padd">


view>


wx:for="}"


wx:for-item="ip"


wx:key="


}">


class="}"


bindtap="onipitemclick"


wx:key="}"


data-item="


}">


}view>


block>


class="ip_tab_comtainer_padd">


view>


scroll-view>
2，scroll-view的css要設定為 white-space: nowrap;

.ip_tab_comtainer
不要用 display: flex;,這樣可能存在相容問題，在android手機上可能滑動不了

.ip_tab_comtainer
3，scroll-view的子節點的css要設定為 display: inline-block;不然可能顯示有問題

.ip_tab_item_s
4，如果要禁用橫向滾動條的顯示需要在page介面的樣式布局裡面加上,不要在元件或者模組的樣式布局裡面加

/**


去除橫向滾動條


*/::-webkit-scrollbar

橫向滾動tab實現

container dd style overflow hidden badge bg primary 前端開發 badge bg secondary 後端開發 badge bg primary 前端開發 badge bg secondary 後端開發 badge bg primary 前端開發 b...

小程式css實現橫向滾動

剛剛從零開始接觸前端,趕鴨子上架記錄下自己的問題.要做乙個動態獲取標題的可橫向滾動欄,記錄下css樣式 wxml class scrollout scroll x wx for wx key key data id class outarr catchtap clickoutcurid view s...

微信小程式橫向滾動正確姿勢

1 xml檔案 view scroll view scroll x class scroll header view class wrap1 wx for text class textline2 text view scroll view view 2 wxss檔案 scroll header s...