uniapp/pages/siteManage/siteManage.vue

<template>
	<view class="site-wrapper">
		<!-- 筛选框start -->
		<view class="ding">
			<view class="cu-bar search bg-gray filter-section">
				<view class="search-form round bg-white">
					<text class="cuIcon-search"></text>
					<input class="" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="请输入站点名称"
					 confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-blue round">查询</button>
				</view>
			</view>
		</view>
		
		<!-- 筛选框end -->

		<!-- 站点列表start -->
		<view class="site-items">
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in siteListData" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="cu-avatar round lg" style="background-image: url(../../static/site-icon.png);"></view>
					<view class="content" v-if="type==1" @tap="goAlarmingList">
						<view class="text-grey site-tit">{{item.siteName}}</view>
					</view>
					<view class="content" v-else  @tap="goDeviceType">
						<view class="text-grey site-tit">{{item.siteName}}</view>
					</view>
					<view class="nav-right num">
						<view class="text-grey text-xs">
							<image src="../../static/nav-icon.png" style="width:25rpx;height:25rpx;margin-right:26rpx"></image>
						</view>
					</view>
					<view class="move">
						<view class="bg-grey">编辑</view>
						<view class="bg-red">删除</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 站点列表end
		
		<!-- 新增按钮start -->
		<view class="plus">
			<image src="../../static/plus.png" style="width:125rpx;height:125rpx" @tap="goAddPage"></image>
		</view>
		<!-- 新增按钮end -->
	</view>

</template>

<script>
	import json from '../../data/json.js';
	
	export default {
		data() {
			return {
				type: '0',
				
				siteListData:json.siteListData,
				
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				CustomBar: this.CustomBar,
			};
		},
	
		onLoad: function (option) {
		     console.log(option.type); //打印出上个页面传递的参数。
			 this.type=option.type;
			 
			 // this.getData()
		},
		methods: {
			
			// getData(){
			// 	uni.request({
			// 	    url: '../../data/json.js', //仅为示例，并非真实接口地址。
			// 	    data: {
			// 	         text: 'uni.request'
			// 	    },
			// 	    header: {
			// 	        'custom-header': 'hello' //自定义请求头信息
			// 	    },
			// 	    success: (res) => {
			// 	        console.log(res);
			// 	        // this.text = 'request success';
			// 	    }
			// 	});
			// },
			
			
			// 页面跳转
			goAddPage() {
				uni.navigateTo({
					url: '/pages/add/add',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goAlarmingList() {
				uni.navigateTo({
					url: '/pages/alarmingList/alarmingList',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goDeviceType() {
				uni.navigateTo({
					url: '/pages/deviceType/deviceType',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},

			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}

	}
</script>

<style>

</style>