您的位置：首页 > 移动开发 > 微信开发

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

2017-03-07 00:00 1856 查看

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<viewclass="section">
<viewclass="section__title">verticalscroll</view>
<scroll-viewscroll-y="true"style="height:200px;"bindscrolltoupper="upper"bindscrolltolower="lower"bindscroll="scroll"scroll-into-view="{{toView}}"scroll-top="{{scrollTop}}">
<viewid="green"class="scroll-view-itembc_green"></view>
<viewid="red"class="scroll-view-itembc_red"></view>
<viewid="yellow"class="scroll-view-itembc_yellow"></view>
<viewid="blue"class="scroll-view-itembc_blue"></view>
</scroll-view>

<viewclass="btn-area">
<buttonsize="mini"bindtap="tap">clickmetoscrollintoview</button>
<buttonsize="mini"bindtap="tapMove">clickmetoscroll</button>
</view>
</view>
<viewclass="sectionsection_gap">
<viewclass="section__title">horizontalscroll</view>
<scroll-viewclass="scroll-view_H"scroll-x="true"style="width:100%">
<viewid="green"class="scroll-view-item_Hbc_green"></view>
<viewid="red"class="scroll-view-item_Hbc_red"></view>
<viewid="yellow"class="scroll-view-item_Hbc_yellow"></view>
<viewid="blue"class="scroll-view-item_Hbc_blue"></view>
</scroll-view>
</view>

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

varorder=['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(vari=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，这样也能通过点击顶部状态栏回到页面顶部

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 小程序

相关文章推荐

新的分享

章节导航