微信小程序 scroll-view 用法
微信官方文檔地址：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
微信小程序 scroll-view
前言
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、scroll-view 是什么？
可滾動視圖區(qū)域 。
二、scroll-view 使用步驟
1.
代碼如下（示例）：
<scroll-view>
/*
scroll-y="true" 允許縱向滾動
必須給 scroll-view css 設(shè)置 height 如果不設(shè)置就會不生效
還有不能在 scroll-view css 設(shè)置 margin 否則 內(nèi)容沒有超出高度就會出現(xiàn)滾動條
scroll-top 設(shè)置豎向滾動條位置
*/
/*
scroll-x="true" 允許橫向滾動
必須給 scroll-view css
1）. width
2). 必須給scroll-view標(biāo)簽添加white-space:nowrap屬性
3). 給子元素添加display:inline-block屬性
還有不能在 scroll-view css 設(shè)置 margin 否則 內(nèi)容沒有超出高度就會出現(xiàn)滾動條
scroll-left 設(shè)置橫向滾動條位置
橫向滾動開啟后不能實現(xiàn)內(nèi)部在寫一個縱向滾動的，樣式會直接亂。
*/
</scroll-view>
隱藏滾動條
提示：css
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
提示：scroll-view 屬性文章來源：http://www.zghlxwxcb.cn/news/detail-514416.html
<scroll-view
enhanced
:show-scrollbar="false"
// show-scrollbar 滾動條顯隱控制 (同時開啟 enhanced 屬性后生效)
// enhanced 啟用 scroll-view 增強(qiáng)特性，啟用后可通過 ScrollViewContext 操作 scroll-view
// ScrollViewContext ，通過 wx.createSelectorQuery 的 NodesRef.node 方法獲取。 僅在 scroll-view 組件開啟 enhanced 屬性后生效。
</scroll-view>
提示：設(shè)置自定義下拉刷新區(qū)域背景顏色文章來源地址http://www.zghlxwxcb.cn/news/detail-514416.html
refresher-background="#FFF"
// 組件 屬性 不是 css
到了這里，關(guān)于微信小程序 scroll-view的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
