uni-app,nvue页面使用list、refresh组件实现局部下拉刷新
先上代码<template><view class="s_page"><text class="f28_333">正在使用的Wifi</text><view class="container" style="height: 100rpx;"><view class="cell" style="border-bottom-width:
·
先上代码
<template>
<view class="s_page">
<text class="f28_333">正在使用的Wifi</text>
<view class="container" style="height: 100rpx;">
<view class="cell" style="border-bottom-width: 0;">
<text class="f24_333">一楼无线局域网</text>
<text class="f24_49C">已连接</text>
</view>
</view>
<view class="title">
<text class="f28_333" style="margin-bottom: 0;">获取设备附近的WLAN</text>
<image class="reresh ml40" src="/static/image/refresh.png" mode=""></image>
</view>
<list class="container">
<refresh @pullingdown='onpullingdown' @refresh="onrefresh" :display=" refreshing ? 'show' : 'hide' " class="refresh">
<text>{{refreshText}}</text>
<loading-indicator></loading-indicator>
</refresh>
<cell v-for="(item,index) in list" :key="index">
<view class="cell" :style=" index == list.length-1 ? 'border-bottom-width:0' : '' ">
<text class="f24_333 flex-1">一楼无线局域网</text>
<image class="icon" src="/static/image/wlan/w1.png"></image>
<image class="icon" src="/static/image/wlan/lock.png"></image>
</view>
</cell>
</list>
</view>
</template>
<script>
export default {
data() {
let list = []
for (let i = 0; i < 100; i++) {
list.push(i);
}
return {
list,
refreshing: false,
refreshText: '↓ Pull To Refresh'
};
},
methods: {
onpullingdown(e) {
if (this.refreshing) return;
if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
this.refreshText = '↑ Pull To Refresh'
} else {
this.refreshText = '↓ Pull To Refresh'
}
},
onrefresh(e) {
if (this.refreshing) return;
this.refreshing = true;
setTimeout(() => {
this.refreshing = false;
this.refreshText = '↓ Pull To Refresh'
}, 3000)
}
}
}
</script>
真机效果还是挺不错的,比起vue的scroll-view,体验好很多
更多推荐
已为社区贡献1条内容
所有评论(0)