微信小程序如何实现scroll-view隐藏滚动条

网页开发的时候往往会为了页面的美观，而选择去掉滚动区域默认的滚动条。微信小程序实现scroll-view隐藏滚动条的方法之一：
首先我们来看一下，scroll-view的一些属性组件

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。
再来看一些简单的代码示例：

<view class="section">

<view class="section__title">vertical scroll</view>

<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">

<view id="green" class="scroll-view-item bc_green"></view>

<view id="red" class="scroll-view-item bc_red"></view>

<view id="yellow" class="scroll-view-item bc_yellow"></view>

<view id="blue" class="scroll-view-item bc_blue"></view>

</scroll-view>

<view class="btn-area">

<button size="mini" bindtap="tap">click me to scroll into view </button>

<button size="mini" bindtap="tapMove">click me to scroll</button>

</view>

<view class="section section_gap">

<view class="section__title">horizontal scroll</view>

<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">

<view id="green" class="scroll-view-item_H bc_green"></view>

<view id="red" class="scroll-view-item_H bc_red"></view>

<view id="yellow" class="scroll-view-item_H bc_yellow"></view>

<view id="blue" class="scroll-view-item_H bc_blue"></view>

</scroll-view>

</view>

var order = ['red', 'yellow', 'blue', 'green', 'red']

Page({

data: {

toView: 'red',

scrollTop: 100

},

upper: function(e) {

console.log(e)

},

lower: function(e) {

console.log(e)

},

scroll: function(e) {

console.log(e)

},

tap: function(e) {

for (var i = 0; i < order.length; ++i) {

if (order[i] === this.data.toView) {

this.setData({

toView: order[i + 1]

})

break

}

},

tapMove: function(e) {

this.setData({

scrollTop: this.data.scrollTop + 10

})

}

})

scroll-view

效果图如下：

注意：
（1）不能在scroll-view中使用textarea,mao,canvas,video组件
（2）scroll-init-view的优先级高于scroll-top
（3）onPullDownRefresh事件，无法在scroll-view中触发
（4）若想使用下拉刷新，一定要使用页面的滚动，而不是scroll-view，这样也能通过点击顶部状态栏回到页面顶部

微信小程序如何实现scroll-view隐藏滚动条

你可能感兴趣的:(微信小程序如何实现scroll-view隐藏滚动条)