uniapp scroll |
您所在的位置：网站首页 › 下拉可以刷新待付款 › uniapp scroll |
uniapp scroll
|
前言:可滚动视图区域。用于区域滚动
话不多说 直接上官网属性 官网示例
讲一下常用的几个 @scroll 滚动时触发 @scrolltoupper 滚动到顶部或左边，会触发 scrolltoupper 事件 @scrolltolower 滚动到底部或右边，会触发 scrolltolower 事件 1.纵向滚动设置scroll-y="true" 开启纵向滚动功能 A B C 2.横向滚动设置scroll-x="true" 开启横向滚动功能 A B C注意：scroll-view本身的display:flex不生效、如果想实现display：flex功能，则可以给scroll-view加上white-space: nowrap，给内容容器加上display:inline-block 3.触底事件@scrolltolower 滚动到底部或右边，会触发 scrolltolower 事件 export default { data() { return { } }, methods: { onReachScollBottom(){ uni.showToast({ title:"触发了触底事件", duration:1500, icon:"none" }) } } } 4.下拉刷新refresher-enabled = "true" 开启自定义下拉刷新 refresher-triggered ="true" 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下 拉刷新未被触发 @refresherrefresh 自定义下拉刷新被触发 export default { data() { return { colorList:["blue","red","yellow"], refresh: false } }, methods: { onRefresh() { this.refresh= true; uni.showToast({ title:"触发了下拉刷新", duration:1500, icon:"none" }) // 这里不能直接让refresh直接为false，否则可能会发生下拉加载无法复位的情况 setTimeout(() => { this.refresh = false; }, 500) } } } |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |