效果圖:
要點介紹:
1,scroll-view 設定為橫向滑動scroll-x=」true」
2,scroll-view的css要設定為 white-space: nowrap;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>
不要用 display: flex;,這樣可能存在相容問題,在android手機上可能滑動不了.ip_tab_comtainer
3,scroll-view的子節點的css要設定為 display: inline-block;不然可能顯示有問題.ip_tab_comtainer
4,如果要禁用橫向滾動條的顯示需要在page介面的樣式布局裡面加上,不要在元件或者模組的樣式布局裡面加.ip_tab_item_s
/**
去除橫向滾動條
*/::-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...