垂直方向
wxml
<scroll-view class="scroll" scroll-y="{{true}}"
refresher-enabled='{{true}}' ------------------------------------>是否开启下拉刷新
bindrefresherrefresh='handleRefresherpulling'----------------------> 刷新触发事件
bindscrolltolower="handlescrolltolower"----------------------------> 触底触发
refresher-triggered="{{triggered}}">------------------------------->设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发
</scroll-view>
js
data: {
text:'',
list:[],
triggered:false
},
// 触底触发
handlescrolltolower(){
console.log('触底了')
},
//刷新触发
handleRefresherpulling(){
setTimeout(()=>{
this.setData({
triggered:false
})
},1000)
console.log('被刷新')
},
水平方向
<scroll-view class="box_horizontal" enable-flex="{{true}}" scroll-x="{{true}}"
bindscrolltolower="handleRight"------------------------------>滑动到最右边触发
>
<view class="item_horizontal">aaaaa</view>
<view class="item_horizontal">bbbbbb</view>
<view class="item_horizontal">ccccc</view>
<view class="item_horizontal">ddddd</view>
</scroll-view>
取消滚动条:
scroll-view ::-webkit-scrollbar { display:none; width:0; height:0; color:transparent; }
相关作者
- 获取点赞0
- 文章阅读量264
评论()