先上代码

	<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,体验好很多

Logo

前往低代码交流专区

更多推荐