scroll-view(小程序)

收藏

垂直方向

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

相关文章

联系小鹿线

咨询老师

咨询老师

扫码下载APP